:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

body,
p,
pre {
  margin: 0;
}

button {
  padding: 0;
  color: inherit;
  font: inherit;
  background: none;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

h1, h2, h3 {
  margin: 0;
  font: inherit;
}

ul, ol {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

a {
  color: inherit;
  text-decoration: none;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

* {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

body {
  overflow-x: hidden;
}

img {
  overflow: hidden;
}

body {
  font-family: -apple-system, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-rendering: optimizeLegibility;
  line-height: 1;
  color: #333;
}

#react-root,
div,
article,
footer,
header,
main,
nav,
section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

button {
  cursor: pointer;
}

::-moz-selection {
  background-color: #dddedf;
}

::selection {
  background-color: #dddedf;
}

::-webkit-input-placeholder {
  color: #808080;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.u-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.u-prewrap {
  white-space: pre-wrap;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.BrowserHappy {
  display: block;
  font-size: 1.2em;
  line-height: 2.6;
  background: #eee;
  text-align: center;
}
.BrowserHappy a {
 color: #259;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

@font-face {
  font-family: 'icomoon';
  src: url(//static.zhihu.com/hemingway/icomoon.4356ce085a0c387d28c3d236716f682d.ttf) format('truetype'),
    url(//static.zhihu.com/hemingway/icomoon.207481a709643f0dfd3d7418ad204e91.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-size: 24px;
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ic_collect:before {
  content: "\E933";
}
.icon-wallet:before {
  content: "\E932";
}
.icon-ic_wechatpay:before {
  content: "\E931";
}
.icon-ic_pass:before {
  content: "\E930";
}
.icon-ic_visibility_off:before {
  content: "\E92D";
}
.icon-ic_highlighted:before {
  content: "\E92E";
}
.icon-ic_conversations:before {
  content: "\E92F";
}
.icon-ic_share_dudu:before {
  content: "\E928";
}
.icon-ic_check_button_off:before {
  content: "\E92B";
}
.icon-ic_check_button_on:before {
  content: "\E92C";
}
.icon-ic_comment:before {
  content: "\E92A";
}
.icon-ic_lock:before {
  content: "\E929";
}
.icon-ic_invite_cancel:before {
  content: "\E927";
}
.icon-ic_column_no_article:before {
  content: "\E923";
}
.icon-ic_no_article:before {
  content: "\E924";
}
.icon-ic_no_contribute:before {
  content: "\E925";
}
.icon-ic_no_drafts:before {
  content: "\E926";
}
.icon-ic_column_end:before {
  content: "\E91B";
}
.icon-ic_column_play:before {
  content: "\E922";
}
.icon-ic_edit_editlink:before {
  content: "\E91C";
}
.icon-ic_edit_link:before {
  content: "\E91D";
}
.icon-ic_edit_showlink:before {
  content: "\E91E";
}
.icon-ic_edit_t:before {
  content: "\E91F";
}
.icon-ic_prompt_done:before {
  content: "\E920";
}
.icon-ic_prompt_error:before {
  content: "\E921";
}
.icon-ic_nav_review:before {
  content: "\E919";
}
.icon-ic_loading:before {
  content: "\E91A";
}
.icon-ic_review_add:before {
  content: "\E918";
}
.icon-ic_column_report:before {
  content: "\E917";
}
.icon-ic_close:before {
  content: "\E900";
}
.icon-ic_column_edit:before {
  content: "\E901";
}
.icon-ic_column_like:before {
  content: "\E902";
}
.icon-ic_column_more:before {
  content: "\E903";
}
.icon-ic_column_reply:before {
  content: "\E904";
}
.icon-ic_column_share:before {
  content: "\E905";
}
.icon-ic_comment_like:before {
  content: "\E906";
}
.icon-ic_help:before {
  content: "\E907";
}
.icon-ic_like_more:before {
  content: "\E908";
}
.icon-ic_nav_more:before {
  content: "\E909";
}
.icon-ic_nav_new:before {
  content: "\E90A";
}
.icon-ic_phot_camera_alt:before {
  content: "\E90B";
}
.icon-ic_phot_delete:before {
  content: "\E90C";
}
.icon-ic_phot_full_screen1:before {
  content: "\E90D";
}
.icon-ic_phot_full_screen2:before {
  content: "\E90E";
}
.icon-ic_radio_button_off:before {
  content: "\E90F";
}
.icon-ic_radio_button_on:before {
  content: "\E910";
}
.icon-ic_refresh:before {
  content: "\E911";
}
.icon-ic_search:before {
  content: "\E912";
}
.icon-ic_share_sina:before {
  content: "\E913";
}
.icon-ic_share_wechat:before {
  content: "\E914";
}
.icon-ic_unfold:before {
  content: "\E915";
}
.icon-ic_zhihu_logo:before {
  content: "\E916";
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

/**
 * appview 色板
 * see https://docs.google.com/document/d/1Jsl5hQqS6dHs9jA2KguH2d9ULbrRHHDB7Z985_PTrWY/edit?ts=58ec5b3b （不全）
 */

/*
 * 日间模式
 * 以 iOS 为默认，android 样式做补充；夜间同。
 */
.appview .av-card {
 background: #fff;
}
.appview .av-titleFont,
  .appview .av-bodyFont {
 color: #444;
}
.appview .av-footerFont {
 color: #999;
}
.appview .av-cardBackground {
 background: #edeef0;
}
.appview .av-borderColor {
 border-color: rgba(222, 222, 222, .5);
}

.appview--android .av-titleFont,
  .appview--android .av-bodyFont {
 color: rgba(0, 0, 0, .87);
}

.appview--android .av-footerFont {
 color: rgba(0, 0, 0, .54);
}

.appview--android .av-cardBackground {
 background: #eff2f4;
}

.appview--android .av-borderColor {
 border-color: rgba(0, 0, 0, .12);
}

/*
 * 夜间模式
 */
.appview--dark .av-titleFont,
  .appview--dark .av-bodyFont {
 color: #808394;
}
.appview--dark .av-footerFont {
 color: #606476;
}
.appview--dark .av-card {
 background: #1e1e29;
}
.appview--dark .av-cardBackground {
 background: #13161e;
}
.appview--dark .av-borderColor {
 border-color: #808394;
}
.appview--dark.appview--android .av-titleFont,
    .appview--dark.appview--android .av-bodyFont {
 color: rgba(255, 255, 255, .87);
}
.appview--dark.appview--android .av-footerFont {
 color: rgba(255, 255, 255, .54);
}
.appview--dark.appview--android .av-card {
 background: #37474f;
}
.appview--dark.appview--android .av-cardBackground {
 background: #212b30;
}
.appview--dark.appview--android .av-borderColor {
 border-color: rgba(255, 255, 255, .12);
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Button {
  display: inline-block;
  padding: 0 16px;
  font-size: 14px;
  line-height: 32px;
  color: #8590a6;
  text-align: center;
  cursor: pointer;
  background: none;
  border: 1px solid rgb(204, 216, 225);
  border-radius: 3px;
}

/* Firefox button padding, border compatible */

.Button::-moz-focus-inner {
 padding: 0;
 border: 0;
}

.Button:focus {
  outline: none;
}

.Button:disabled {
  cursor: default;
  opacity: .5;
}

.Button:hover {
  background-color: rgba(207, 216, 230, .1);
}

.Button:hover:disabled {
 background-color: transparent;
 background-color: initial;
}

.Button--grey:hover {
 color: #abb6c5;
 border: 1px solid #abb6c5;
}

.Button--grey, .Button--grey:disabled {
 color: #c3ccd9;
 border: 1px solid #c3ccd9;
}

.Button--blue {
  color: #0f88eb;
  border: 1px solid #0f88eb;
}

.Button--blue:hover {
 background-color: rgba(13, 121, 209, .06);
}

.Button--blue:disabled {
 background-color: transparent;
 background-color: initial;
}

.Button--green {
  color: #50c87e;
  border: 1px solid #50c87e;
}

.Button--green:hover {
 background-color: rgba(8, 166, 100, .06);
}

.Button--green:disabled {
 background-color: transparent;
 background-color: initial;
}

.Button--primary {
  background: rgb(204, 216, 225);
}

.Button--primary.Button--blue {
 color: #fff;
}

.Button--primary.Button--blue:hover {
 background-color: #0d79d1;
}

.Button--primary.Button--blue, .Button--primary.Button--blue:disabled {
 background: #0f88eb;
}

.Button--primary.Button--green {
 color: #fff;
 border-color: #0ca547;
}

.Button--primary.Button--green:hover {
 background-color: #08a369;
}

.Button--primary.Button--green, .Button--primary.Button--green:disabled {
 background: #0ca547;
}

.Button--primary.Button--red {
 color: #fff;
}

.Button--primary.Button--red:hover {
 background-color: #ed4e50;
}

.Button--primary.Button--red, .Button--primary.Button--red:disabled {
 background: #e26d6d;
 border-color: #e26d6d;
}

.Button--primary.Button--grey {
 color: #fff;
}

.Button--primary.Button--grey:hover {
 background: #abb6c5;
 border: 1px solid #abb6c5;
}

.Button--primary.Button--grey, .Button--primary.Button--grey:disabled {
 background: #c3ccd9;
 border: 1px solid #c3ccd9;
}

.Button--spread {
  width: 100%;
}

.Button-icon {
  margin-right: 7px;
}

.Button--plain .Button-icon {
 margin-right: 6px;
}

.Button--red .Button-icon,
  .Button--blue .Button-icon,
  .Button--green .Button-icon {
 fill: currentColor;
}

.Button--plain, .Button--link {
  height: auto;
  padding: 0;
  line-height: inherit;
  background-color: transparent;
  border: none;
  border-radius: 0;
}

.Button--plain:hover, .Button--link:hover {
 background-color: transparent;
}

.Button--link {
  color: #175199;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Icon {
  vertical-align: text-bottom;
  fill: #9fadc7;
}

.Icon--left {
  margin-right: 6px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.ModalButtonGroup--vertical {
 margin-top: 40px;
 margin-bottom: 16px;
}
.ModalButtonGroup--vertical .Button {
 display: block;
 width: 220px;
 margin-right: auto;
 margin-left: auto;
}
.ModalButtonGroup--vertical .Button + .Button {
 margin-top: 28px;
}
.Modal-content--buttonGroupOnly .ModalButtonGroup--vertical {
 margin-top: 60px;
}
.ModalButtonGroup--horizontal {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
 margin-top: 48px;
}
.ModalButtonGroup--horizontal .Button {
 -webkit-box-flex: 1;
 -ms-flex: 1;
 flex: 1;
} /* only single Button */
.ModalButtonGroup--horizontal .Button:last-child:first-child {
 width: 220px;
 margin-right: auto;
 margin-left: auto;
 -webkit-box-flex: initial;
 -ms-flex: initial;
 flex: initial;
}
.ModalButtonGroup--horizontal .Button + .Button {
 margin-left: 16px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Modal-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 203;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-transition: opacity 300ms ease-out;
  transition: opacity 300ms ease-out;
}

.Modal-wrapper.Modal-enter {
 opacity: .01;
}

.Modal-wrapper.Modal-enter-active {
 opacity: 1;
}

.Modal-wrapper.Modal-leave {
 opacity: 1;
}

.Modal-wrapper.Modal-leave-active {
 opacity: .01;
}

.Modal-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background-color: rgba(0, 0, 0, .65);
  -webkit-transition: background-color 300ms ease-out;
  transition: background-color 300ms ease-out;
}

.Modal-wrapper--transparent .Modal-backdrop {
 background-color: transparent;
}

.Modal {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 400px;
  max-height: calc(100vh - 48px);
  margin-right: auto;
  margin-left: auto;
  outline: 0;
  -webkit-box-shadow: 0 5px 20px 0 rgba(0, 34, 77, .5);
          box-shadow: 0 5px 20px 0 rgba(0, 34, 77, .5);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: max-height 800ms ease;
  transition: max-height 800ms ease;
}

.Modal--large {
 width: 536px;
}

.Modal--fullPage {
 width: 688px;
 height: calc(100vh - 48px);
}

.Modal-enter .Modal {
 -webkit-transform: translateY(20px);
 transform: translateY(20px);
}

.Modal-enter-active .Modal {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 -webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out;
 transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out;
 transition: transform 300ms ease-out, opacity 300ms ease-out;
 transition: transform 300ms ease-out, opacity 300ms ease-out, -webkit-transform 300ms ease-out;
}

.Modal-leave .Modal {
 -webkit-transform: translateY(0);
 transform: translateY(0);
}

.Modal-leave-active .Modal {
 -webkit-transform: translateY(20px);
 transform: translateY(20px);
 -webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out;
 transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out;
 transition: transform 300ms ease-out, opacity 300ms ease-out;
 transition: transform 300ms ease-out, opacity 300ms ease-out, -webkit-transform 300ms ease-out;
}

.Modal-inner {
  overflow: auto;
  background: #fff;
  border-radius: 2px;
}

.Modal--fullPage .Modal-inner {
 height: 100%;
}

.Modal-closeButton {
  position: absolute;
  top: 8px;
  right: -60px;
  padding: 12px;
}

.Modal-closeIcon {
  vertical-align: top;
  fill: #fff;
}

.Modal-title {
  margin-top: 40px;
  font-size: 24px;
  font-weight: 500;
  color: #262626;
  text-align: center;
}

.Modal-title.Modal-title--simple {
 font-family: inherit;
 font-size: 20px;
}

.Modal-subtitle {
  padding: 0 38px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #8590a6;
  text-align: center;
}

.Modal-subtitle a {
 text-decoration: underline;
}

.Modal-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0 24px 32px;
  margin-top: 24px;
  line-height: 1.7;
  opacity: 1;
}

.Modal--fullPage .Modal-content {
 padding: 0;
}

.Modal-content.Modal-content--spread {
 height: 100%;
 margin-top: 0;
}

.Modal-content.Modal-content--hidden {
 opacity: 0;
 -webkit-transition: opacity 300ms ease-out;
 transition: opacity 300ms ease-out;
}

.Modal-footer {
  padding: 16px 24px;
  font-size: 13px;
  line-height: 1.7;
  color: #9aaabf;
  background: #f7f8fa;
  border-top: 1px solid #efeef5;
}

.Modal-footer a {
 text-decoration: underline;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.VagueImage {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f7f8fa;
}

.VagueImage-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  opacity: 1;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  -webkit-transition: opacity 300ms ease-in;
  transition: opacity 300ms ease-in;
}

.VagueImage-canvas.is-active {
 opacity: 0;
}

.VagueImage-innerLarge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

/**
 * 富文本样式
 */

.RichText {
  word-break: break-word;
  white-space: pre-wrap;
}

.RichText a:not(.video-box):not(.link-box):not(.member_mention):not(.VideoCard-link):not(.UserLink-link) {
 text-decoration: none;
 cursor: pointer;
 border-bottom: 1px solid rgba(64, 64, 64, .72);
}

.RichText a:not(.video-box):not(.link-box):not(.member_mention):not(.VideoCard-link):not(.UserLink-link):hover {
 color: #175199;
 border-color: rgba(62, 122, 194, .72);
}

.RichText a:not(.video-box):not(.link-box):not(.member_mention):not(.VideoCard-link):not(.UserLink-link):hover .icon-external {
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#175199" fill-rule="evenodd" d="M16.558 6H14c-.552 0-1-.448-1-1s.448-1 1-1h5c.276 0 .526.112.707.293.18.18.293.43.293.707v5c0 .552-.448 1-1 1s-1-.448-1-1V7.386l-5.03 5.03c-.39.39-1.024.39-1.414 0-.39-.39-.39-1.023 0-1.414L16.558 6zM9 4c.552 0 1 .448 1 1s-.448 1-1 1H6v12h12v-3c0-.552.448-1 1-1s1 .448 1 1v3c0 1.105-.895 2-2 2H6c-1.105 0-2-.895-2-2V6c0-1.105.895-2 2-2h3z"/></svg>');
}

/* 优化过后的超级链接，隐藏 protocol 和 path */

.RichText a:not(.video-box):not(.link-box):not(.member_mention):not(.VideoCard-link):not(.UserLink-link) > .ellipsis::after {
 content: '...';
}

.RichText a:not(.video-box):not(.link-box):not(.member_mention):not(.VideoCard-link):not(.UserLink-link) > .invisible { /* .u-hideText */
 font: 0/0 a;
 color: transparent;
 text-shadow: none;
 background-color: transparent;
}

.RichText a:not(.video-box):not(.link-box):not(.member_mention):not(.VideoCard-link):not(.UserLink-link) u {
 border-color: transparent;
}

/* 添加外链 icon (外链富文本：<a href><i class="icon-external"></a>) */

.RichText a:not(.video-box):not(.link-box):not(.member_mention):not(.VideoCard-link):not(.UserLink-link) .icon-external {
 width: 16px;
 height: 16px;
 display: inline-block;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#262626" fill-rule="evenodd" d="M16.558 6H14c-.552 0-1-.448-1-1s.448-1 1-1h5c.276 0 .526.112.707.293.18.18.293.43.293.707v5c0 .552-.448 1-1 1s-1-.448-1-1V7.386l-5.03 5.03c-.39.39-1.024.39-1.414 0-.39-.39-.39-1.023 0-1.414L16.558 6zM9 4c.552 0 1 .448 1 1s-.448 1-1 1H6v12h12v-3c0-.552.448-1 1-1s1 .448 1 1v3c0 1.105-.895 2-2 2H6c-1.105 0-2-.895-2-2V6c0-1.105.895-2 2-2h3z"/></svg>');
 background-size: cover;
 background-position: 0 2px;
}

.RichText a.member_mention, .RichText a.UserLink-link {
 color: #175199;
}

.RichText a.member_mention:hover, .RichText a.UserLink-link:hover {
 border-bottom: 1px solid rgba(62, 122, 194, .72);
}

.RichText u {
 text-decoration: none;
 border-bottom: 1px solid rgba(64, 64, 64, .72);
}

.RichText u a:not(.video-box):not(.link-box):not(.member_mention):not(.VideoCard-link) {
 border-color: transparent;
}

.RichText b {
 font-weight: 700;
}

.RichText h1, .RichText h2, .RichText h3, .RichText h4, .RichText h5, .RichText h6 {
 margin-top: 1em;
 margin-bottom: 1em;
 font-size: 18px;
 font-weight: 400;
}

.RichText p {
 margin-bottom: .72em;
}

/* 图片 */

.RichText .content_image,
  .RichText .origin_image {
 display: block;
 max-width: 100%;
 margin-top: .72em;
 margin-bottom: .72em;
}

.RichText .zh-lightbox-thumb {
 cursor: -webkit-zoom-in;
}

.RichText blockquote {
 padding-left: 1em;
 margin: 1em 0;
 color: #6b7a8c;
 border-left: 4px solid #cfd8e6;
}

.RichText blockquote a:not(.video-box):not(.link-box):not(.member_mention):not(.VideoCard-link) {
 border-color: rgba(107, 122, 140, .72);
}

.RichText ul, .RichText ol {
 padding-left: 2em;
 margin: 1em 0;
}

.RichText ul li, .RichText ol li {
 list-style-position: outside;
}

.RichText ul ul, .RichText ol ol, .RichText ul ol, .RichText ol ul {
 margin: 0;
}

.RichText ul li {
 list-style-type: disc;
 list-style-type: initial;
}

.RichText ol li {
 list-style-type: decimal;
}

/* 视频, 分享 */

.RichText .video-box, .RichText .link-box {
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
 margin-top: 16px;
 margin-bottom: 16px;
 overflow: auto;
 white-space: normal;
 cursor: pointer;
 border: solid 1px #e7eaf1;
 border-radius: 4px;
 -webkit-box-shadow: 0 1px 3px 0 rgba(0, 34, 77, .05);
 box-shadow: 0 1px 3px 0 rgba(0, 34, 77, .05);
}

.RichText .video-box .thumbnail, .RichText .link-box .thumbnail {
 -ms-flex-negative: 0;
 flex-shrink: 0;
 width: 90px;
 height: 90px;
 -o-object-fit: cover;
 object-fit: cover;
}

.RichText .video-box .content, .RichText .link-box .content {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 width: 100%;
 padding: 10px 16px;
 overflow: hidden;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 -ms-flex-pack: distribute;
 justify-content: space-around;
}

.RichText .video-box .title, .RichText .link-box .title {
 font-size: 18px;
 font-weight: 400;
}

.RichText .video-box .url, .RichText .link-box .url {
 overflow: hidden;
 font-size: 15px;
 color: #8798ae; /* .u-ellipsis */
 text-overflow: ellipsis;
 word-wrap: normal;
 white-space: nowrap;
}

.RichText .video-box .label, .RichText .link-box .label {
 display: none;
}

/* 公式 */

.RichText img[eeimg] {
 max-width: 100%;
 vertical-align: middle;
}

.RichText img[eeimg="1"] {
 display: inline-block;
 margin: 0 3px;
}

/* 代码高亮 */

.RichText pre {
 padding-right: 1em;
 padding-left: 1em;
 margin: 1em 0;
 overflow: auto;
 font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace;
 font-size: 14px;
 word-wrap: break-word;
 background: #ebeef5;
 border-radius: 4px;
}

/* 修改自 trac 主题 */

.RichText pre .hll {
 background-color: #ffc;
}

/* stylelint-disable declaration-block-single-line-max-declarations */

.RichText pre .c {
 font-style: italic;
 color: #998;
}

/* Comment */

.RichText pre .err {
 color: #a61717;
 background-color: #e3d2d2;
}

/* Error */

.RichText pre .k {
 font-weight: bold;
}

/* Keyword */

.RichText pre .o {
 font-weight: bold;
}

/* Operator */

.RichText pre .cm {
 font-style: italic;
 color: #998;
}

/* Comment.Multiline */

.RichText pre .cp {
 font-weight: bold;
 color: #999;
}

/* Comment.Preproc */

.RichText pre .c1 {
 font-style: italic;
 color: #998;
}

/* Comment.Single */

.RichText pre .cs {
 font-style: italic;
 font-weight: bold;
 color: #999;
}

/* Comment.Special */

.RichText pre .gd {
 color: #000;
 background-color: #fdd;
}

/* Generic.Deleted */

.RichText pre .ge {
 font-style: italic;
}

/* Generic.Emph */

.RichText pre .gr {
 color: #a00;
}

/* Generic.Error */

.RichText pre .gh {
 color: #999;
}

/* Generic.Heading */

.RichText pre .gi {
 color: #000;
 background-color: #dfd;
}

/* Generic.Inserted */

.RichText pre .go {
 color: #888;
}

/* Generic.Output */

.RichText pre .gp {
 color: #555;
}

/* Generic.Prompt */

.RichText pre .gs {
 font-weight: bold;
}

/* Generic.Strong */

.RichText pre .gu {
 color: #aaa;
}

/* Generic.Subheading */

.RichText pre .gt {
 color: #a00;
}

/* Generic.Traceback */

.RichText pre .kc {
 font-weight: bold;
}

/* Keyword.Constant */

.RichText pre .kd {
 font-weight: bold;
}

/* Keyword.Declaration */

.RichText pre .kn {
 font-weight: bold;
}

/* Keyword.Namespace */

.RichText pre .kp {
 font-weight: bold;
}

/* Keyword.Pseudo */

.RichText pre .kr {
 font-weight: bold;
}

/* Keyword.Reserved */

.RichText pre .kt {
 font-weight: bold;
 color: #458;
}

/* Keyword.Type */

.RichText pre .m {
 color: #099;
}

/* Literal.Number */

.RichText pre .s {
 color: #d32;
}

/* Literal.String */

.RichText pre .na {
 color: #008080;
}

/* Name.Attribute */

.RichText pre .nb {
 color: #008080;
}

/* Name.Builtin */

.RichText pre .nc {
 font-weight: bold;
 color: #458;
}

/* Name.Class */

.RichText pre .no {
 color: #008080;
}

/* Name.Constant */

.RichText pre .ni {
 color: #800080;
}

/* Name.Entity */

.RichText pre .ne {
 font-weight: bold;
 color: #900;
}

/* Name.Exception */

.RichText pre .nf {
 font-weight: bold;
 color: #900;
}

/* Name.Function */

.RichText pre .nn {
 color: #555;
}

/* Name.Namespace */

.RichText pre .nt {
 color: #000080;
}

/* Name.Tag */

.RichText pre .nv {
 color: #008080;
}

/* Name.Variable */

.RichText pre .ow {
 font-weight: bold;
}

/* Operator.Word */

.RichText pre .w {
 color: #bbb;
}

/* Text.Whitespace */

.RichText pre .mf {
 color: #099;
}

/* Literal.Number.Float */

.RichText pre .mh {
 color: #099;
}

/* Literal.Number.Hex */

.RichText pre .mi {
 color: #099;
}

/* Literal.Number.Integer */

.RichText pre .mo {
 color: #099;
}

/* Literal.Number.Oct */

.RichText pre .sb {
 color: #d32;
}

/* Literal.String.Backtick */

.RichText pre .sc {
 color: #d32;
}

/* Literal.String.Char */

.RichText pre .sd {
 color: #d32;
}

/* Literal.String.Doc */

.RichText pre .s2 {
 color: #d32;
}

/* Literal.String.Double */

.RichText pre .se {
 color: #d32;
}

/* Literal.String.Escape */

.RichText pre .sh {
 color: #d32;
}

/* Literal.String.Heredoc */

.RichText pre .si {
 color: #d32;
}

/* Literal.String.Interpol */

.RichText pre .sx {
 color: #d32;
}

/* Literal.String.Other */

.RichText pre .sr {
 color: #808000;
}

/* Literal.String.Regex */

.RichText pre .s1 {
 color: #d32;
}

/* Literal.String.Single */

.RichText pre .ss {
 color: #d32;
}

/* Literal.String.Symbol */

.RichText pre .bp {
 color: #999;
}

/* Name.Builtin.Pseudo */

.RichText pre .vc {
 color: #008080;
}

/* Name.Variable.Class */

.RichText pre .vg {
 color: #008080;
}

/* Name.Variable.Global */

.RichText pre .vi {
 color: #008080;
}

/* Name.Variable.Instance */

.RichText pre .il {
 color: #099;
}

/* Literal.Number.Integer.Long */

.RichText pre::-webkit-scrollbar {
 width: 6px;
 height: 6px;
}

.RichText pre::-webkit-scrollbar-thumb:horizontal {
 background-color: rgba(0, 0, 0, .5);
 border-radius: 6px;
}

.RichText pre::-webkit-scrollbar-thumb:horizontal:hover {
 background-color: rgba(0, 0, 0, .6);
}

.RichText .katex-display {
 text-align: left;
}

body:not(.Body--isAppleDevice) .RichText h1, body:not(.Body--isAppleDevice) .RichText h2, body:not(.Body--isAppleDevice) .RichText h3, body:not(.Body--isAppleDevice) .RichText h4, body:not(.Body--isAppleDevice) .RichText h5, body:not(.Body--isAppleDevice) .RichText h6, body:not(.Body--isAppleDevice) .RichText b {
 font-weight: 700;
}

body:not(.Body--isAppleDevice) .RichText .video-box title, body:not(.Body--isAppleDevice) .RichText .link-box title {
 font-weight: 700;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Input-wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 180px;
  height: 34px;
  padding: 4px 10px;
  font-size: 14px;
  background: #fff;
  border: 1px solid #e7eaf1;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: background 200ms, border 200ms;
  transition: background 200ms, border 200ms;
}

.Input-wrapper.Input-wrapper--grey {
 background: #f7f8fa;
}

.Input-wrapper.Input-wrapper--spread {
 width: 100%;
}

.Input-wrapper.Input-wrapper--multiline {
 height: inherit;
}

.Input-wrapper.Input-wrapper--large, .Input-wrapper .Editable-toolbar, .Input-wrapper .DraftEditor-root {
 height: auto;
 padding: 6px 12px;
}

.Input-wrapper .Dropzone-overlay {
 margin: 6px 12px;
}

.Input-wrapper.Input-wrapper--noPadding {
 padding: 0;
}

.Input-wrapper.is-focus {
 background: #fff;
 border: 1px solid #9fadc7;
}

.Input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0;
  overflow: hidden;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
}

input.Input {
 height: 24px;
 line-height: 24px;
}

.Input:not(input) {
 line-height: 24px;
}

.Input:-ms-input-placeholder {
 line-height: normal;
}

.Input::-webkit-input-placeholder, .Input .public-DraftEditorPlaceholder-root {
 color: #9fadc7;
}

.Input:-ms-input-placeholder, .Input .public-DraftEditorPlaceholder-root {
 color: #9fadc7;
}

.Input::placeholder, .Input .public-DraftEditorPlaceholder-root {
 color: #9fadc7;
}

.Input--validationError::-webkit-input-placeholder {
 color: #f75659;
}

.Input--validationError:-ms-input-placeholder {
 color: #f75659;
}

.Input--validationError::placeholder {
 color: #f75659;
}

.Input-after {
  position: absolute;
  top: 50%;
  right: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: auto;
  -webkit-transform: translate3d(0, -50%, 0);
          transform: translate3d(0, -50%, 0);
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Popover {
  position: relative;
  display: inline-block;
}

.Popover-arrow {
  position: absolute;
}

.Popover-arrow, .Popover-arrow::after {
 border: 8px solid transparent;
 display: block;
 width: 0;
 height: 0;
}

.Popover-arrow::after {
 position: absolute;
 left: 0;
 top: 0;
 content: "";
}

.Popover-arrow--top {
  border-top-color: #e7eaf1;
  margin-top: 7px;
}

.Popover-arrow--top, .Popover-arrow--top::after {
 border-bottom-width: 0;
 -webkit-transform: translate3d(-50%, -100%, 0);
 transform: translate3d(-50%, -100%, 0);
}

.Popover-arrow--top::after {
 margin-top: -1px;
 border-top-color: #fff;
}

.Popover-arrow--bottom {
  border-bottom-color: #e7eaf1;
  margin-top: -8px;
}

.Popover-arrow--bottom, .Popover-arrow--bottom::after {
 border-top-width: 0;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
}

.Popover-arrow--bottom::after {
 margin-top: 1px;
 border-bottom-color: #fff;
}

.Popover-arrow--left {
  border-left-color: #e7eaf1;
  margin-left: 7px;
}

.Popover-arrow--left, .Popover-arrow--left::after {
 border-right-width: 0;
 -webkit-transform: translate3d(-100%, -50%, 0);
 transform: translate3d(-100%, -50%, 0);
}

.Popover-arrow--left::after {
 margin-left: -1px;
 border-left-color: #fff;
}

.Popover-arrow--right {
  border-right-color: #e7eaf1;
  margin-left: -8px;
}

.Popover-arrow--right, .Popover-arrow--right::after {
 border-left-width: 0;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
}

.Popover-arrow--right::after {
 margin-left: 1px;
 border-right-color: #fff;
}

.Popover-content {
  position: absolute;
  background: #fff;
  border: 1px solid #e7eaf1;
  border-radius: 4px;
  -webkit-box-shadow: 0 5px 20px rgba(0, 34, 77, .1);
          box-shadow: 0 5px 20px rgba(0, 34, 77, .1);
  z-index: 203;
}

.Popover-content-enter {
 opacity: .01;
}

.Popover-content-enter-active {
 opacity: 1;
 -webkit-transform: translateY(0);
 transform: translateY(0);
 -webkit-transition: opacity 200ms ease-out, -webkit-transform 200ms ease-out;
 transition: opacity 200ms ease-out, -webkit-transform 200ms ease-out;
 transition: transform 200ms ease-out, opacity 200ms ease-out;
 transition: transform 200ms ease-out, opacity 200ms ease-out, -webkit-transform 200ms ease-out;
}

.Popover-content-leave {
 opacity: 1;
 -webkit-transform: translateY(0);
 transform: translateY(0);
}

.Popover-content-leave-active {
 opacity: .01;
 -webkit-transition: opacity 200ms ease-out, -webkit-transform 200ms ease-out;
 transition: opacity 200ms ease-out, -webkit-transform 200ms ease-out;
 transition: transform 200ms ease-out, opacity 200ms ease-out;
 transition: transform 200ms ease-out, opacity 200ms ease-out, -webkit-transform 200ms ease-out;
}

.Popover-content--fixed {
 position: fixed;
}

.Popover-content--top {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  margin-top: -8px;
}

.Popover-content--top.Popover-content--arrowed {
 margin-top: -16px;
}

.Popover-content--top.Popover-content--enter, .Popover-content--top.Popover-content-leave-active {
 -webkit-transform: translateY(8px);
 transform: translateY(8px);
}

.Popover-content--bottom {
  margin-top: 8px;
}

.Popover-content--bottom.Popover-content--arrowed {
 margin-top: 16px;
}

.Popover-content--bottom.Popover-content--enter, .Popover-content--bottom.Popover-content-leave-active {
 -webkit-transform: translateY(-8px);
 transform: translateY(-8px);
}

.Popover-content--left {
  -webkit-transform-origin: right center;
          transform-origin: right center;
  margin-left: -8px;
}

.Popover-content--left.Popover-content--arrowed {
 margin-left: -16px;
}

.Popover-content--left.Popover-content--enter, .Popover-content--left.Popover-content-leave-active {
 -webkit-transform: translateX(8px);
 transform: translateX(8px);
}

.Popover-content--right {
  margin-left: 8px;
}

.Popover-content--right.Popover-content--arrowed {
 margin-left: 16px;
}

.Popover-content--right.Popover-content--enter, .Popover-content--right.Popover-content-leave-active {
 -webkit-transform: translateX(-8px);
 transform: translateX(-8px);
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Menu {
  padding: 6px 0;
}

.Menu-item {
  display: block;
  width: 100%;
  padding: 0 20px;
  text-align: left;
  cursor: pointer;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.Menu-item.is-active {
 background: #f4f8fb;
}

.Menu-item--noActive {
  cursor: default;
}

.Menu-divider {
  margin: 8px 0;
  border-bottom: 1px solid #ebeef5;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.AutoComplete-DefaultItem {
  line-height: 40px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Avatar {
  background: #fff;
  border-radius: 2px;
}

.Avatar--medium {
  border-radius: 3px;
}

.Avatar--large {
  border-radius: 4px;
}

.Avatar--round {
  border-radius: 50%;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.AutoComplete-UserItem {
  width: 188px;
  height: 50px;
  padding: 9px 0;
  line-height: normal;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.AutoComplete-UserDetail {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

.AutoComplete-UserName, .AutoComplete-UserHeadline {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.AutoComplete-UserName {
  font-size: 14px;
  color: #262626;
}

.AutoComplete-UserHeadline {
  font-size: 12px;
  color: #8590a6;
}

.AutoComplete-UserAvatar {
  vertical-align: middle;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.AutoComplete-menu--hidden {
  visibility: hidden;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Pagination {
  padding: 16px 20px;
  text-align: center;
  margin: 0 auto;
}

.PaginationButton {
  color: #262626;
  -webkit-transition: color 200ms;
  transition: color 200ms;
  padding: 0 15px;
}

.PaginationButton:not(:disabled):hover {
 color: #175199;
}

.PaginationButton--current {
  color: #8590a6;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Button {
  border-radius: 4px;
  border-color: #b3b3b3;
  color: #808080;
}

.Button:active {
 background-color: #b3b3b3;
 color: #fff;
}

.Button:focus {
 outline: #f1f2f3 auto 5px;
}

/* for legacy iconfont */

.Button.icon {
 font-size: 24px;
 line-height: 1;
}

.Button .icon {
 vertical-align: -4px;
}

.Button[disabled] {
  border-color: #b3b3b3;
  color: #808080;
}

.Button[disabled].Button--blue {
 background-color: transparent;
}

.Button[disabled]:hover {
 background-color: transparent;
}

.Button--plain {
  color: #808080;
}

.Button--plain:active {
 color: #808080;
 background: transparent;
}

.Button--primary.Button--green {
 background-color: #50c87e;
 border-color: #50c87e;
}

.Button--primary.Button--green:hover {
 background-color: rgba(77, 190, 46, .06);
 color: #50c87e;
}

.Button--green {
  color: #50c87e;
  border-color: #50c87e;
}

.Button--green:active {
 background: #50c87e;
 color: #fff;
}

.Button--blue {
  border-color: #0080ff;
  color: #0080ff;
}

.Button--blue:active {
 background: #0080ff;
 color: #fff;
}

.Button--black {
  color: #333;
  border-color: #333;
}

.Button--black:hover {
 background-color: rgba(0, 0, 0, .08);
}

.Button--black:active {
 background-color: #333;
 color: #fff;
}

.Button--red {
  border-color: #f75659;
  color: #f75659;
}

.Button--red:hover {
 background-color: rgba(226, 109, 109, .06);
}

.Button--red:active {
 background: #f75659;
 color: #fff;
}

html:not([data-focus-method="pointer"]) .Button:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.RichText {
  white-space: normal;
}

.RichText a,
  .RichText a:not(.video-box):not(.link-box):not(.member_mention) {
 color: #259;
 text-decoration: none;
 border-bottom: 0 !important;
}

.RichText a:hover, .RichText a:not(.video-box):not(.link-box):not(.member_mention):hover {
 text-decoration: underline;
 color: #259;
}

.RichText p {
 margin: 20px 0;
}

.RichText ul + br,
  .RichText ol + br,
  .RichText p + br {
 display: none;
}

.RichText h1,
  .RichText h2,
  .RichText h3,
  .RichText h4 {
 margin: 20px 0;
 font-size: 24px;
 font-weight: normal;
}

.RichText blockquote,
  .RichText ul,
  .RichText ol {
 margin: 20px 0 20px;
}

.RichText img,
  .RichText .VagueImage {
 display: block;
 max-width: 100%;
 margin-left: auto;
 margin-right: auto;
}

.RichText blockquote {
 padding-left: 1.2em;
 border-left: 4px solid #e2e3e4;
 color: #333;
}

.RichText li {
 margin-top: 10px;
}

.RichText ul,
  .RichText ol {
 padding-left: 40px;
}

.RichText embed {
 width: 100%; /* height: $break / (16/9) + 40; */
}

.appview--dark .RichText blockquote {
 border-color: currentColor;
 color: inherit;
}

.appview--android.appview--dark .RichText a,
  .appview--android.appview--dark .RichText a:not(.video-box):not(.link-box):not(.member_mention) {
 color: #3592f5;
}

.Menu-item .Button {
 padding: 0;
 margin: 0;
}

.Menu-item.is-active {
 background: #f7f8f9;
}

.Pagination {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.PaginationButton {
  height: 34px;
  line-height: 32px;
  width: 34px;
  margin: 0 8px;
  text-align: center;
  font-size: 15px;
  color: #808080;
  padding: 0;
  border-radius: 50%;
}

.PaginationButton + .PaginationButton {
 margin: 0 8px;
}

.PaginationButton:not(:disabled):not(.PaginationButton--fake):hover {
 background: transparent;
 border: 1px solid #808080;
 color: #333;
}

.PaginationButton--current {
  border: 1px solid #b3b3b3;
}

.PaginationButton-prev,
.PaginationButton-next {
  width: auto;
  padding: 0 10px;
}

.PaginationButton-prev:hover, .PaginationButton-next:hover {
 border: 0 !important;
}

@media (max-width: 660px) {
  .PaginationButton {
    display: none;
  }

  .PaginationButton-prev,
  .PaginationButton-next {
    display: block;
  }
}

.SimpleInput-wrapper {
  width: auto;
  height: auto;
  padding: 0;
  overflow: visible;
  font-size: 16px;
  border: 0;
}

.SimpleInput-wrapper.is-focus {
 border: 0;
}

.SimpleInput,
.SimpleInput-wrapper .Input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  outline: none;
  min-height: 40px;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .16);
          box-shadow: 0 1px 0 rgba(0, 0, 0, .16);
  font-size: 14px;
  line-height: 20px;
  padding: 10px 4px 11px;
  margin-bottom: 2px;
  -webkit-transition: -webkit-box-shadow ease-in-out .15s;
  transition: -webkit-box-shadow ease-in-out .15s;
  transition: box-shadow ease-in-out .15s;
  transition: box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
}

.SimpleInput:focus,
  .SimpleInput.Editable--focus,
  .SimpleInput-wrapper .Input:focus,
  .SimpleInput-wrapper .Input.Editable--focus {
 -webkit-box-shadow: 0 2px 0 #0080ff;
 box-shadow: 0 2px 0 #0080ff;
}

.SimpleInput[disabled], .SimpleInput-wrapper .Input[disabled] {
 background: transparent;
}

.SimpleInput[disabled]:focus,
  .SimpleInput[disabled].Editable--focus,
  .SimpleInput-wrapper .Input[disabled]:focus,
  .SimpleInput-wrapper .Input[disabled].Editable--focus {
 -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .16);
 box-shadow: 0 1px 0 rgba(0, 0, 0, .16);
}

.SimpleInput::-webkit-input-placeholder, .SimpleInput-wrapper .Input::-webkit-input-placeholder {
 color: #b3b3b3;
}

.SimpleInput:-ms-input-placeholder, .SimpleInput-wrapper .Input:-ms-input-placeholder {
 color: #b3b3b3;
}

.SimpleInput::placeholder, .SimpleInput-wrapper .Input::placeholder {
 color: #b3b3b3;
}

.Input .public-DraftEditorPlaceholder-root {
  color: #b3b3b3;
}

.SimpleInput-wrapper--search {
  position: relative;
}

.SimpleInput-wrapper--search .SimpleInput,
  .SimpleInput-wrapper--search .Input {
 padding-left: 30px;
}

.SimpleInput-wrapper--search:before {
 content: '\E912';
 font-size: 24px;
 color: #808080;
 position: absolute;
 width: 24px;
 height: 24px;
 left: 4px;
 font-family: icomoon;
}

.Checkbox {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
}

.Checkbox:before {
 content: '\E92B';
 font-family: 'icomoon';
 color: #666768;
 font-size: 24px;
 vertical-align: -4px;
}

.Checkbox:checked:before {
 content: '\E92C';
 color: #0080ff;
}

.Checkbox:hover:before{
 color: #0080ff;
}

.Radio {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  outline: none;
}

.Radio:before {
 content: '\E90F';
 font-family: 'icomoon';
 color: #666768;
 font-size: 24px;
 vertical-align: -4px;
}

.Radio:checked:before {
 content: '\E910';
 color: #0080ff;
}

.Radio:hover:before{
 color: #0080ff;
}

.DraftEditor-editorContainer div {
 display: block;
}

.Editable-imageUploader-status {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.Editable-videoUploader-thumbnail {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.VideoErrorCard-thumbnail {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.AutoComplete-UserItem {
  width: 100%;
}

.AutoComplete-UserDetail {
  display: block;
}

.AutoComplete-UserHeadline {
  display: none;
}

.ImageView-inner {
  display: block;
}

.AutoComplete-UserItem {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.FavlistsModal {
  width: 400px;
}

@media (max-width: 660px) {

 .FavlistsModal {
  width: 100%
 }
}

.Favlists-content .CheckItem-input {
 visibility: hidden;
}

.Favlists-actions {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.Favlists-addIcon {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

.RichText-gifPlaceholder {
  text-align: center;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #29d;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  -webkit-box-shadow: 0 0 10px #29d, 0 0 5px #29d;
          box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.LoginModal-loginButon {
  margin: 0 70px;
  height: 38px;
  line-height: 36px;
}

.LoginModal-registerButton {
  margin: 24px 0;
}

.LoginModal-registerButton .icon {
 -webkit-transform: rotate(-90deg);
 transform: rotate(-90deg);
 display: inline-block;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.StaticCacheBanner {
  position: relative;
  z-index: 100;
  padding: 16px 10px;
  line-height: 28px;
  color: #8590a6;
  text-align: center;
  background-color: #e7eaf1;
}
.StaticCacheBanner a {
 color: #175199;
 -webkit-transition: border-bottom 200ms ease-in;
 transition: border-bottom 200ms ease-in;
}
.StaticCacheBanner a:hover {
 border-bottom: 1px solid rgba(23, 81, 153, .72);
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
/* FIXME name conflict with zhihu-components */
.Menu {
  position: relative;
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.Menu-dropdown {
  position: absolute;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 4px;
  line-height: 54px;
  font-size: 14px;
  text-align: left;
  color: #333;
  background: #fff;
  -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
          box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .1s;
  transition: all .1s;
}

.Menu-dropdown li {
 padding: 0;
}

.Menu-dropdown li > .Button,
    .Menu-dropdown li > a {
 padding: 0 16px;
 width: 100%;
 height: auto;
 line-height: 42px;
 text-align: left;
 display: block;
 color: #333;
}

.Menu-dropdown li:hover {
 background: #f7f8f9;
}

.Menu-dropdown li:first-child {
 border-top-left-radius: 4px;
 border-top-right-radius: 4px;
}

.Menu-dropdown li:last-child {
 border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;
}

.Menu-dropdown a {
 display: block;
}

.MenuButton-listen-hover ~ .Menu-dropdown {
  -webkit-transition-delay: .2s;
          transition-delay: .2s;
}

/* keep specificity same for easier override */
.Menu--open > .Menu-dropdown {
  visibility: visible;
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Triangle {
  position: relative;
  display: block;
  width: 1em;
  height: 1em;
}

.Triangle-inner,
.Triangle-outer {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  width: 0;
  height: 0;
  border: 0.5em solid transparent;
}

.Triangle--up .Triangle-inner,
  .Triangle--up .Triangle-outer {
 border-bottom-color: currentColor;
}

.Triangle--up .Triangle-outer {
 -webkit-transform: translateY(-1px);
 transform: translateY(-1px);
}

.Triangle--down .Triangle-inner,
  .Triangle--down .Triangle-outer {
 border-top-color: currentColor;
}

.Triangle--down .Triangle-outer {
 -webkit-transform: translateY(1px);
 transform: translateY(1px);
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.ColumnFollowButton {
  width: 92px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Avatar-hemingway {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.Avatar--s {
  width: 26px;
  height: 26px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Navbar {
  contain: layout;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 59px;
  width: 100%;
  border-bottom: 1px solid transparent;
  color: #808080;
  background: rgba(255, 255, 255, .97);
  /* will-change: transform; iOS safari has a bug on this. @see T91765 */
  z-index: 2;
  position: relative;
}

.Navbar a {
 -webkit-transition: color .2s;
 transition: color .2s;
}

.Navbar a:hover {
 text-decoration: none;
 color: #333;
}

.Navbar.ScrollBackFixed {
  position: fixed;
  border-color: rgba(0, 0, 0, .08);
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  will-change: transform;
}

.Navbar.ScrollBackFixed-active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.Navbar.ScrollBackFixed-animation {
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
}

.Navbar-logo-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 58px;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.Navbar-logo {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 58px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: gray;
  -webkit-transition: color .05s ease-in-out;
  transition: color .05s ease-in-out;
}

.Navbar-title {
  margin: 0 auto;
  width: 660px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  white-space: nowrap;
}

.Navbar-columnIcon {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 38px;
          flex: 0 0 38px;
  height: 38px;
  margin-right: 12px;
  border-radius: 50%;
}

.Navbar-postTitleName {
  line-height: 15px;
}

.Navbar-postTitleMeta {
  font-size: 13px;
  color: #808080;
  margin-bottom: 3px;
}

.Navbar-postTitleMain {
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  color: #333;
  max-width: 420px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.Navbar-columnTitle {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.Navbar.showColumnTitle .Navbar-columnTitle {
  opacity: 1;
  visibility: visible;
}

.Navbar-columnTitleMain {
  color: #333;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.Navbar-followBtn {
  margin-left: 1em;
  height: 32px;
  line-height: 1;
}

.Navbar-functionality {
  position: absolute;
  right: 0;
  top: 0;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  height: 58px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}

.Navbar-write {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 10px;
  white-space: nowrap;
}

.Navbar-write .icon {
 margin-right: 3px;
}

.Navbar-menu {
  width: 66px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 66px;
          flex: 0 0 66px;
  text-align: center;
  -webkit-transition: color .2s;
  transition: color .2s;
}

.Navbar-menu:hover {
 color: #333;
}

.Navbar-menu .MenuButton {
 -webkit-box-flex: 1;
 -ms-flex-positive: 1;
 flex-grow: 1;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
}

.Navbar-menu .MenuButton:hover {
 color: #333;
}

.Navbar-menu .Menu-dropdown {
 top: 100%;
 right: 20px;
 width: 220px;
}

.Navbar-menu .Menu-item {
 height: 54px;
 white-space: nowrap;
}

.Navbar-menu .Menu-item > * {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 height: 100%;
 margin-right: 16px;
}

.Navbar-menu .Menu-item .Avatar-hemingway {
 margin-right: 16px;
 -webkit-box-flex: 0;
 -ms-flex: 0 0 36px;
 flex: 0 0 36px;
}

.Navbar-menu .Triangle {
 position: absolute;
 top: 0;
 right: 1px;
 -webkit-transform: translate3d(-50%, -100%, 0);
 transform: translate3d(-50%, -100%, 0);
}

.Navbar-menu .Menu-item:first-child:hover .Triangle-inner {
 border-bottom-color: #f7f9f9;
}

.Navbar-menuItem--split {
  position: relative;
}

.Navbar-menuItem--split:before {
 content: '';
 position: absolute;
 left: 16px;
 right: 16px;
 height: 1px;
 background: rgba(0, 0, 0, .08);
 top: -1px;
}

@media (max-width: 760px) {
  .Navbar-logo-wrapper,
  .Navbar-functionality {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
  }
  .Navbar-title {
    position: relative;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 0px;
            flex: 1 0 0;
    padding-left: 16px;
    padding-right: 16px;
    min-height: 24px;
    overflow: hidden;
    margin-left: 56px;
    margin-right: 80px;
  }

  .Navbar-titleMr60 {
    margin-right: 60px;
  }

  .Navbar-title::before {
    content: '';
    height: 24px;
    width: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    background: rgba(0, 0, 0, .16);
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .Navbar-postTitleName {
    -ms-flex-negative: 1;
        flex-shrink: 1;
    overflow: hidden;
  }
  .Navbar-columnIcon,
  .Navbar-followBtn {
    display: none;
  }
}

@media (max-width: 420px) {
  .Navbar-write {
    display: none;
  }
}

.Navbar-me {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 16px;
}

.Navbar-me img {
 width: 36px;
 height: 36px;
 margin-right: 10px;
}

.Navbar-loginButon {
  height: 32px;
  line-height: 30px;
  margin: 0 16px 0 6px;
  width: 72px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Layout {
  background: #fff;
  min-height: 660px;
}

.Layout-navbarHolder {
  height: 59px;
}

.Layout-main {
  margin: 47px auto 0;
  padding: 0 0;
  width: 660px;
  z-index: 1;
}

@media (max-width: 660px) {

 .Layout-main {
  width: 100% !important;
  margin-top: 35px
 }
}

.GlobalAlert {
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -230px;
  width: 460px;
  height: 84px;
  line-height: 84px;
  color: #666768;
  z-index: 19;
  border: solid rgba(0, 0, 0, .08);
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
  -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
          box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
  font-size: 14px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #fff;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  z-index: 102;
}

.GlobalAlert i {
 width: 24px;
 height: 24px;
 margin-right: 8px;
 display: inline-block;
}

.GlobalAlert.sticky {
 position: fixed;
 top: 0;
}

.GlobalAlert-info i {
  color: #50c87e;
}

.GlobalAlert-error i {
  color: #f75659;
}

.GlobalAlert--margin {
  top: 59px;
}

.StaticCacheBanner {
  display: block;
}

.appview .Layout-main {
  margin: 0;
  width: auto;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ErrorContainer {
  margin-top: 213px;
  text-align: center;
}

.Error-code {
  width: 96px;
  height: 96px;
  margin: 0 auto;
  border: 4px solid #000;
  line-height: 91px;
  font-size: 38px;
}

.Error-description {
  margin: 28px auto;
}

.Error-button {
  width: 115px;
  height: 36px;
  font-size: 14px;
  margin: 0 auto;
  border-color: #0080ff;
  color: #0080ff;
  border-radius: 4px;
  border: 1px solid #0f88eb;
  display: inline-block;
  padding: 0 16px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  background: none;
}

.Error-button:hover {
 background-color: rgba(13, 121, 209, .06);
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.MobileModal-wrapper {
  position: relative;
}

.MobileModal-wrapper--absoluted {
  position: absolute;
  top: 0;
  max-height: 100vh;
  overflow: hidden;
  z-index: -1;
}

.MobileModal {
  background: #fff;
}

.MobileModal-content--default {
  padding-top: 50px;
  padding-bottom: 60px;
  min-height: 100vh;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.MobileModal-closeButton {
  position: fixed;
  top: 0;
  right: 0;
  padding: 16px 20px;
  z-index: 100;
}

.MobileModal-closeIcon {
  fill: #262626;
  display: block;
}

.MobileModal-title {
  font-weight: 700;
}

.MobileModal-title--default {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0 16px;
  border-bottom: 1px solid #e7eaf1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 0 1px 3px rgba(0, 37, 55, .05);
          box-shadow: 0 1px 3px rgba(0, 37, 55, .05);
  margin: 0;
  font-size: 16px;
  line-height: 49px;
  background: #fff;
  z-index: 99;
}

.MobileModal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .65);
}

.MobileModal--plain {
  position: fixed;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 100;
  margin: auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 87.2%;
  -webkit-box-shadow: 0 5px 20px 0 rgba(0, 34, 77, .5);
          box-shadow: 0 5px 20px 0 rgba(0, 34, 77, .5);
  border-radius: 2px;
  overflow: hidden;
}

.MobileModal--plain .MobileModal-closeIcon {
 fill: #8590a6;
}

.MobileModal-content--plain {
  padding: 16px 20px;
}

.MobileModal-title--plain {
  text-align: center;
  padding: 24px 20px 8px;
  font-size: 18px;
}

.MobileModal-subtitle {
  font-size: 14px;
  padding: 0 20px;
  color: #8590a6;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.Bull {
  margin: 0 6px;
}
.Bull::before {
 content: '\B7';
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.HomeTop {
  position: relative;
  height: 470px;
  text-align: center;
  z-index: 0;
  background: url("https://z1.zhimg.com/images/6a263d8b.patterns.svg") center no-repeat;
}

.HomeTop:before {
 content: '';
 background: url('https://z1.zhimg.com/images/83364567.bg@2x.png') repeat-x;
 background-size: 20px 450px;
 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
}

.HomeTop h1 {
 width: 129px;
 height: 0;
 padding-top: 179px;
 overflow: hidden;
 margin: 0;
 background: url('https://z1.zhimg.com/images/f6fbb429.logo.svg') center no-repeat;
 background-size: 129px 179px;
 position: absolute;
 left: 50%;
 margin-left: -65px;
 top: 152px;
}

.HomeTop h2 {
 font-size: 18px;
 line-height: 24px;
 font-weight: 300;
 margin: 0;
 position: absolute;
 top: 350px;
 width: 100%;
 color: #2a2a2a;
 letter-spacing: .5em;
}

.HomeTop a {
 text-decoration: none;
}

.HomeTop-btn {
  position: absolute;
  top: 413px;
  left: 50%;
  width: 120px;
  height: 38px;
  margin-left: -51px;
  line-height: 36px;
  min-height: 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-color: #333;
  color: #333;
}

.HomeTop-requestBtn {
  position: absolute;
  top: 466px;
  left: 50%;
  margin-left: -39px;
  line-height: 12px;
  font-size: 14px;
  color: #50c87e;
}

.HomeTop-requestBtn .Icon {
 margin-left: 2px;
}

@media (max-width: 420px) {
  .HomeTop-requestBtn {
    display: none;
  }

  .HomeTop-btn {
    display: none;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.BlockTitle {
  position: relative;
  display: block;
  margin-bottom: 32px;
  line-height: 22px;
}

.BlockTitle-title {
  position: relative;
  display: inline;
  padding-right: 16px;
  font-weight: 700;
  background: #fbfcfc;
  z-index: 1;
}

.BlockTitle-line {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  color: #f0f0f0;
  background: currentColor;
}

@media (max-width: 660px) {
  .BlockTitle {
    margin-bottom: 16px;
  }
}

@media (max-width: 420px) {
  .BlockTitle {
    margin-left: 16px;
    margin-right: 16px;
  }
}

.appview .BlockTitle.BlockTitle {
 padding: 10px 0;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 margin-bottom: 0;
}

.appview .BlockTitle-title {
 background: none;
}

.appview .BlockTitle-line {
 display: none;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Refresh-button {
  position: relative;
  top: 5px;
  line-height: 0;
  display: inline-block;
}

.Refresh-Rotate {
  -webkit-transition: -webkit-transform .3s ease-in-out;
  transition: -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
  -webkit-transform:rotate(180deg);
          transform:rotate(180deg);
}

.Refresh-button-wrapper {
  font-size: 13px;
  padding: 0;
  min-height: 0;
  min-width: 0;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 90px;
  height: 32px;
  color: #333;
  border-color: #333;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.HomeColumn {
  margin-top: 48px;
  width: 1020px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

@media screen and (max-width: 1020px) {

 .HomeColumn {
  width: 660px
 }
}

.HomeColumn-List {
  min-height: 546px;
}

.HomeColumn-List::before,
  .HomeColumn-List::after {
 display: table;
 content: "";
}

.HomeColumn-List:after {
 clear: both;
}

.HomeColumn-List li {
 float: left;
 list-style: none;
 margin: 20px 0 0 16px;
 width: 206px;
 height: 258px;
 text-align: center;
 color: #808080;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
 box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
 border-radius: 4px;
 background: #fff;
 font-size: 14px;
 position: relative;
}

.HomeColumn-List li:nth-child(4n-3) {
 margin-left: 0;
}

.HomeColumn-List li:nth-child(-n+4) {
 margin-top: 0;
}

@media screen and (min-width: 1020px) {

 .HomeColumn-List li:nth-child(4n-3) {
  margin-left: 74px;
 }
}

@media screen and (max-width: 1020px) {

 .HomeColumn-List li:nth-child(4n-3) {
  margin-left: 16px;
 }

 .HomeColumn-List li:nth-child(3n-2) {
  margin-left: 5px;
 }

 .HomeColumn-List li:nth-child(-n+4) {
  margin-top: 20px;
 }

 .HomeColumn-List li:nth-child(-n+3) {
  margin-top: 0;
 }
}

.Home-random {
  text-align: center;
  margin: 36px 0 0;
}

.HomeColumn-avatar {
  margin: 26px auto 8px;
  width: 48px;
  height: 48px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 50%;
  overflow: hidden;
}

.HomeColumn-avatar img {
 width: 48px;
 height: 48px;
}

.HomeColumn-title {
  margin: 16px 16px 7px;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.HomeColumn-title a {
 color: #333;
}

.HomeColumn-description {
  line-height: 21px;
  height: 42px;
  margin-bottom: 14px;
  word-break: break-all;
  padding-left: 16px;
  padding-right: 16px;
}

.HomeColumn-description a {
 color: gray;
}

.HomeColumn-meta {
  margin-bottom: 15px;
}

.HomeColumn-btn {
  margin-bottom: 23px;
  padding: 0;
  min-height: 0;
  min-width: 0;
  line-height: 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 90px;
  height: 32px;
}

@media (max-width: 420px) {
  .HomeColumn {
    margin-top: 0;
    width: 100%;
  }

  .HomeColumn-meta {
    display: none;
  }

  .HomeColumn-List li {
  height: 88px;
  display: block;
  width: 100%;
  margin: 0!important;
  background: #fbfcfc;
  -webkit-box-shadow: none;
  box-shadow: none;
 }

  .HomeColumn-avatar {
    float: left;
    margin: 20px 12px 20px 16px;
  }

  .HomeColumn-title {
    margin: 20px 52px 2px 12px;
    text-align: left;
    width: 136px;
  }

  .HomeColumn-description {
    margin: 2px 2px 22px 12px;
    line-height: 20px;
    text-align: left;
    width: 144px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
  }

  .HomeColumn-btn {
    position: absolute;
    top: 28px;
    right: 16px;
    border: none;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.HomeArticle {
  margin: 48px auto 0;
  width: 1020px;
  position: relative;
}

@media screen and (max-width: 1020px) {

 .HomeArticle {
  width: 660px
 }
}

.HomeArticle-List {
  width: auto;
  min-height: 540px;
  margin: 0 auto;
}

@media screen and (min-width: 1020px) {

 .HomeArticle-List {
  margin-left: 45px
 }
}

.HomeArticle-List::before,
  .HomeArticle-List::after {
 display: table;
 content: "";
}

.HomeArticle-List::after {
 clear: both;
}

.HomeArticle-List li {
 width: 300px;
 height: 248px;
 float: left;
 list-style: none;
 margin: 20px 0 0 16px;
 text-align: center;
 color: #808080;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
 box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
 border-radius: 4px;
 background: #fff;
 font-size: 14px;
 position: relative;
}

.HomeArticle-List li:nth-child(3n-2) {
 margin-left: 0;
}

.HomeArticle-List li:nth-child(-n+3) {
 margin-top: 0;
}

@media screen and (max-width: 1020px) {

 .HomeArticle-List li:nth-child(3n-2) {
  margin-left: 20px;
 }

 .HomeArticle-List li:nth-child(-n+3) {
  margin-top: 20px;
 }

 .HomeArticle-List li:nth-child(-n+2) {
  margin-top: 0;
 }
}

.Home-random {
  text-align: center;
  margin: 36px 0 0;
}

.HomeArticle-titleImage {
  width: 100%;
  height: 130px;
  background-position: center;
  background-size: cover;
  position: relative;
  border-radius: 4px 4px 0 0;
  margin: 0;
}

.HomeArticle-title {
  padding: 20px 16px 16px;
  line-height: 25px;
  text-align: left;
  color: #333;
  font-size: 16px;
  font-weight: 700;
}

.HomeArticle-meta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  text-align: left;
  line-height: 16px;
}

.HomeArticle-metaAuthor {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  float: left;
  width: 28%;
}

.HomeArticle-metaAuthor a {
 color: gray;
}

.HomeArticle-metaColumn {
  float: right;
  text-align: right;
  width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.HomeArticle-metaColumn a {
 color: gray;
}

.HomeArticle-summary {
  line-height: 1.7;
  text-align: left;
  color: #333;
  padding-left: 16px;
  padding-right: 16px;
  word-wrap: break-word;
}

.HomeArticle-summary .Icon {
 margin-bottom: 1px;
}

.HomeArticle-readAll {
  margin-left: 2px;
  position: relative;
  color: #b3b3b3;
}


@media (max-width: 420px) {
  .HomeArticle {
    width: 100%;
  }

  .HomeArticle-List {
    margin: 0;
  }

  .HomeArticle-List li {
  background: #fbfcfc;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin: 23px 16px !important;
  width: 100%;
  height: 88px;
 }

  .HomeArticle-titleImage {
    width: 88px;
    height: 88px;
    border-radius: 4px;
  }

  .HomeArticle-title {
    position: absolute;
    top: 0;
    left: 104px;
    padding: 0;
    width: 184px;
    height: 44px;
  }

  .HomeArticle-metaAuthor {
    position: absolute;
    left: 88px;
  }

  .HomeArticle-metaColumn {
    margin-right: 16px;
    width: 150px;
  }

  .HomeArticle-summary {
    display: none;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.HomeBottom {
  margin-top: 48px;
  background: url('https://z1.zhimg.com/images/83364567.bg@2x.png') repeat-x;
  background-size: 20px 450px;
  text-align: center;
  color: #2a2a2a;
  padding-top: 134px;
  display: block;
}

.HomeBottom h3 {
 padding: 26px 0;
 font-size: 18px;
 font-weight: 300;
 margin: 0 auto 40px;
 border: solid #97FFD8;
 border-width: 1px 0;
 width: 345px;
 letter-spacing: 14px;
 white-space: nowrap;
}

.HomeBottom-button {
  font-size: 14px;
  padding: 0;
  min-height: 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 120px;
  height: 38px;
  line-height: 36px;
  color: #333;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  background: none;
  border: 1px solid #333;
}

.HomeBottom-button:hover{
 background-color: rgba(207, 216, 230, .1);
}

.HomeBottom-footer {
  margin: 80px 0 60px 0;
  font-size: 12px;
  line-height: 22px;
  color: gray;
  display: block;
}

@media (max-width: 420px) {
  .HomeBottom {
    padding-top: 46px;
  }

  .HomeBottom-button {
    display: none;
  }

  .HomeBottom-footer {
    margin: 40px;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Home-body {
  background: #fbfcfc;
}

.Home-blockTitle {
  width: 500px;
}

.Home-blockTitle .BlockTitle-title {
 padding-left: 16px;
 padding-right: 16px;
 font-size: 14px;
}

.Home-blockTitle .BlockTitle-line {
 color: #d9d9d9;
}

.Home-layout {
  margin: 0 auto;
}

@media screen and (min-width: 1020px)  {
  .Home-blockTitle {
    margin: 0 auto 30px;
    text-align: center;
  }

  .Home-layout {
    width: 1020px;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ImageView {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 101;
  overflow: hidden;
  -webkit-transition: background-color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out;
}

.ImageView.is-active {
 background-color: rgba(255, 255, 255, .9);
}

.ImageView-inner {
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.ImageView-img {
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
  -webkit-transition: -webkit-transform 300ms ease-in-out;
  transition: -webkit-transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
}

.ImageView-transformOrigin {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
  -webkit-transition-property: -webkit-transform opacity;
  transition-property: -webkit-transform opacity;
  transition-property: transform opacity;
  transition-property: transform opacity, -webkit-transform opacity;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.OpenInAppButton {
  position: fixed;
  top: auto;
  bottom: 0;
  left: 50%;
  z-index: 100;
  width: 105px;
  font-size: 15px;
  font-weight: 500;
  line-height: 36px;
  color: #fff;
  text-align: center;
  background: #0084ff;
  border-radius: 18px;
  -webkit-transform: translate(-50%, 200%);
          transform: translate(-50%, 200%);
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
          box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
  -webkit-transition: -webkit-transform .3s .3s;
  transition: -webkit-transform .3s .3s;
  transition: transform .3s .3s;
  transition: transform .3s .3s, -webkit-transform .3s .3s;
}

.OpenInAppButton.is-shown {
  -webkit-transform: translate(-50%, -25px);
          transform: translate(-50%, -25px);
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Annotation-mark {
  background-color: rgba(40, 66, 85, .05);
  margin-top: 16px;
  padding-bottom: 16px;
  border-radius: 4px;
  position: relative;
}

@media (max-width: 660px) {

 .Annotation-mark {
  margin: 16px 12px 0
 }
}

.Annotation-markTitle {
  color: #1f1f1f;
  font-size: 15px;
  margin-left: 16px;
  padding-top: 16px;
  font-weight: 600;
}

@media (max-width: 660px) {

 .Annotation-markTitle {
  margin: 12px 12px 8px
 }
}

.Annotation-markSummary {
  color: #262626;
  font-size: 14px;
  margin: 4px 16px 0;
  line-height: 24px;
}

.Annotation-markSummary a {
 cursor: pointer;
 color: #175199;
 text-decoration: underline;
}

@media (max-width: 660px) {

 .Annotation-markSummary {
  margin: 12px
 }
}

.Annotation-complaintHelp {
  position: absolute;
  top: 18px;
  right: 16px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.TitleImage {
  display: block;
}

.TitleImage img {
 display: block;
}

.Layout-titleImage--normal .TitleImage {
 margin-bottom: 22px;
}

.TitleImage-image {
  position: relative;
  background: #b3b3b3 no-repeat center center;
  background-size: cover;
}

.TitleImage-image--full {
  width: 100vw;
  height: calc(100vh - 59px);
  margin-left: calc(330px - 50vw);
}

.TitleImage-image--full::after {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 background: rgba(0, 0, 0, .16);
 height: 100%;
}

.TitleImage-imagePure {
  width: 100%;
}

@media (max-width: 660px) {
  .TitleImage-imagePure--fixed {
    height: auto !important;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ConfirmModal-body {
	color: #8590a6;
  text-align: center;
  padding: 0 38px;
  margin-top: 4px;
  font-size: 14px;
}

.ConfirmModal-mobile{
  margin-top: 50px;
}

.ConfirmModal-buttons {
  margin-top: 40px;
  margin-bottom: 16px;
}

.ConfirmModal-buttons .Button {
 display: block;
 width: 220px;
 margin-right: auto;
 margin-left: auto;
}

.ConfirmModal-buttons .Button--blue {
 background: #0f88eb;
 color: #fff;
}

.ConfirmModal-buttons .Button--blue:hover {
 background-color: #0d79d1;
}

.ConfirmModal-cancelButton {
	margin-top: 28px;
	padding: 0 16px;
  line-height: 32px;
  color: #8590a6;
  text-align: center;
  cursor: pointer;
  background: none;
  border: 1px solid #ccd8e1;
  border-radius: 3px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.TPass {
  display: inline-block;
  border-color: #ccc;
}

.TPass-wrapper {
  display: inline-block;
  position: relative;
  font-size: 14px;
  color: #666;
  border-color: inherit;
}

.TPass-input {
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  margin-top: 1px;
  margin-left: 1px;
  padding: 0;
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 3px;
  line-height: 32px;
  text-align: center;
  color: currentColor;
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
  color: #808080;
}

.TPass-input::-webkit-inner-spin-button,
  .TPass-input::-webkit-outer-spin-button {
 -webkit-appearance: none;
 appearance: none;
}

.TPass-input:focus {
  opacity: 1;
}

.TPassBoxes {
  display: inline-block;
  border: 1px solid;
  border-color: inherit;
  border-radius: 3px;
  line-height: 1;
  vertical-align: top;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.TPassBox {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  width: 32px;
  height: 32px;
  border-left: 1px solid;
  border-left-color: inherit;
  line-height: 32px;
  text-align: center;
  vertical-align: top;
}

.TPassBoxes:first-child {
  border-left: 0;
}
.TPassBox-mask::before {
/* default masked box style */
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: currentColor;
  color: #808080;
}

.TPassBoxes,
.TPassBox {
  -webkit-transition: border-color .1s;
  transition: border-color .1s;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Spinner {
  contain: strict;
  display: block;
  margin: 0 auto;
  width: 24px;
  height: 24px;
  line-height: 24px;
}

.Spinner::after {
  content: '\E91A';
  display: inline-block;
  font-size: 24px;
  font-family: 'icomoon';
  -webkit-animation: spinner .8s infinite;
          animation: spinner .8s infinite;
  vertical-align: -4px;
}

@-webkit-keyframes spinner {
  0% { -webkit-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes spinner {
  0% { -webkit-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Payment {
  font-size: 14px;
  text-align: center;
  color: #666;
}

.Payment-placeholder {
  height: 20px;
  padding: 70px;
  text-align: center;
}

.Payment-placehoder--empty {
  margin-bottom: -16px;
}

.PaymentsList {
  text-align: left;
  margin: 0 -16px -16px;
}

.PaymentItem {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 15px;
  height: 70px;
  line-height: 70px;
  cursor: pointer;
  border-top: 1px solid #ebeaea;
}

.PaymentItem:hover {
 background: #fafafa;
}

.PaymentItem .icon {
 vertical-align: -4px;
 margin-right: 6px;
}

.PaymentItem--disabled {
  color: #999999;
  pointer-events: none;
}

.Payment-wechatPay,
.Payment-balancePay {
  line-height: 40px;
  padding-top: 20px;
  padding-bottom: 8px;
  border-top: 1px solid #ebeaea;
}

.Payment-wechatPay .icon, .Payment-balancePay .icon {
 margin-right: 6px;
}

.Payment-wechatPayTitle,
.Payment-balancePayTitle {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.PaymentIconWechat {
  color: #33ad37;
}

.PaymentIconWallet {
  color: #0f88eb;
}

.PaymentItem--disabled .PaymentIconWallet {
 color: #999;
}

.Payment-balancePaySms {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
}

.Payment-balancePaySmsText {
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
}

.Payment-sms {
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
}

.Payment-sendSms {
  position: absolute;
  right: 0;
  top: 44px;
  border: none;
  line-height: 33px;
  color: currentColor;
  background: none;
}

.Payment-sendSms:hover {
 text-decoration: underline;
 cursor: pointer;
}

.Payment-sendSms[disabled] {
 color: #999;
 cursor: not-allowed;
}

.Payment-qrWrapper,
.Payment-qrPlaceholder {
  margin: 0 auto;
  width: 115px;
  height: 115px;
  color: #999;
}

.Payment-qrWrapper i, .Payment-qrPlaceholder i {
 margin: 20px;
}

.Payment-qrWrapper img, .Payment-qrPlaceholder img {
 width: 115px;
 height: 115px;
}

.Payment-qrPlaceholder {
  padding-top: 30px;
}

.Payment-qrPlaceholder img {
  position: absolute;
  bottom: 0;
  opacity: .01;
}

.Payment-balancePay {

}

.Payment-balancePayFooter {
  padding: 20px 0 0;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.Payment-balancePayConfirmBtn {
  width: 60px;
  padding: 0;
}

.Payment-balancePayForget {
  font-size: 12px;
  line-height: 33px;
  color: #999;
}

.Payment-errorTip {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: #c33;
  text-align: left;
  line-height: 36px;
}

.Payment-errorInput {
  border-color: #ffb3ba;
}

.Payment-errorInput .TPass-wrapper {
 color: #ffb3ba;
}

.Payment-errorInput input {
  outline-color: #ffb3ba;
}

/* 支付密码 */
.Payment-tpass {
  position: relative;
  line-height: normal;
}
.Payment-tpass .TPass-wrapper {
 color: #ccc;
}

.Payment-progressing .TPass-wrapper {
 visibility: hidden;
}

.Payment-balancePaySpinner {
  margin-top: -24px;
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.HoverTitle {
  position: relative;
}

.HoverTitle:hover::before,
.HoverTitle:hover::after,
.HoverTitle:focus::before,
.HoverTitle:focus::after {
  -webkit-animation: hoverTitleFadeIn 100ms linear forwards;
          animation: hoverTitleFadeIn 100ms linear forwards;
}
.HoverTitle:hover::before,
.HoverTitle:hover::after {
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}

.HoverTitle::before,
.HoverTitle::after {
  content: '';
  position: absolute;
  left: 50%;
  visibility: hidden;
  opacity: 0;
  z-index: 10;
}

.HoverTitle::before {
  top: 22px;
  width: 0;
  height: 0;
  margin: 0 0 0 -6px;
  font-size: 0;
  color: rgba(0, 0, 0, .8);
  border-bottom: 6px solid currentColor;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.HoverTitle::after {
  content: attr(data-hover-title);
  top: 28px;
  padding: 10px 16px;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.5;
  font-size: 13px;
  color: #fff;
  background: rgba(0, 0, 0, .8);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@-webkit-keyframes hoverTitleFadeIn {
  0% { opacity: 0; visibility: visible; }
  100% { opacity: 1; visibility: visible; }
}

@keyframes hoverTitleFadeIn {
  0% { opacity: 0; visibility: visible; }
  100% { opacity: 1; visibility: visible; }
}

.HoverTitle--slim::before {
 top: 28px;
}

.HoverTitle--slim::after {
 top: 34px;
 padding: 3px 8px;
 line-height: 1.8;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.IconWeibo {
  color: #e16a70;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.IconWechat {
  color: #81d300;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Tipjar {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #666768;
  font-size: 14px;
  margin-bottom: 40px;
}

.Tipjar-button {
  margin: 8px 0 34px;
  padding: 0;
  background-color: #f36;
  border-color: #f36;
  color: #fff;
  width: 80px;
  height: 36px;
}

.Tipjar-button:hover {
 background-color: #f36;
 color: #fff;
}

.Tipjar-button .Spinner::after {
 font-size: 20px;
}

.Tipjar-tagLine {
  margin: 20px 0;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.Tipjar-stateDescription {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  text-align: center;
  line-height: 25.2px;
}

.Tipjaror-list {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 320px;
  margin-top: 16px;
}

.Tipjaror-avatar {
  margin: 0 8px 8px 0;
}

.Tipjaror-avatar img {
 width: 26px;
 height: 26px;
}

.Tipjaror-more {
  background: rgba(0, 0, 0, .06);
  color: #b3b3b3;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  margin-top: 4px;
}

.Tipjaror-more .Spinner::after {
 font-size: 16px;
 vertical-align: 0;
}

.TipjarDialog-user {
  font-size: 16px;
  color: #333;
  font-weight: 700;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 16px 0 0;
}

.TipjarDialog-user .UserAvatar {
 margin-right: 12px;
}

.TipjarDialog-tagLine {
  background: #f6f6f6;
  border-radius: 4px;
  padding: 5px 10px;
  color: #808080;
  margin-bottom: 26px;
  position: relative;
}

.TipjarDialog-tagLine .Triangle {
 position: absolute;
 top: -11px;
 left: 6px;
}

.TipjarDialog-currentAmount {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
}

.TipjarDialog-currentAmount .Button {
 width: 28%;
 color: #fff;
 border-color: #f75659;
 background: #f75659;
 opacity: 1;
}

.TipjarDialog-currentAmount .Button:hover {
 background: #f75659;
}

.TipjarDialog-currentAmount .Button b {
 font-weight: 700;
 font-size: 16px;
 margin-right: 2px;
}

.TipjarDialog-amountList {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.TipjarDialog-amountList .Button {
 width: 28%;
 margin: 0 0 24px;
 font-size: 13px;
}

.TipjarDialog-amountList b {
 margin-right: .2em;
 font-size: 16px;
}

.TipjarDialog-amountCustom {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.TipjarDialog-amountCustom .SimpleInput {
 -webkit-box-flex: 1;
 -ms-flex: 1;
 flex: 1;
 min-height: 0;
 height: 32px;
 padding: 0 4px;
}

.TipjarDialog-customButton {
  color: #f75659;
}

.TipjarDialog-amountInput {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

.TipjarDialog-amountInput .Button {
 margin-left: 20px;
 height: 32px;
 line-height: 30px;
}

.TipjarDialog-error {
  color: #f75659;
  margin-top: 6px;
  visibility: hidden;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.TipjarSuccessModal .Modal-inner {
 overflow: visible;
}

.TipjarSuccessDialog {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.TipjarSuccess-icon {
  color: #50c87e;
  font-size: 40px;
  margin: 40px 0 16px;
}

.TipjarSuccess-description {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 16px;
}

.TipjarSuccess-description a {
 color: #259;
}

.TipjarSuccess-description a:hover {
 text-decoration: underline;
}

.TipjarSuccess-share {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #edeeef;
}

.TipjarSuccess-shareText {
  color: #333;
  margin-bottom: 20px;
}

.TipjarSuccess-shareList {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.TipjarSuccess-shareList > * {
 margin: 0 20px;
}

.TipjarSuccess-shareList .Menu-dropdown {
 top: 100%;
 margin-left: -15px;
}

.TipjarSuccess-shareList .Menu-dropdown .Menu-item {
 cursor: default;
}

.TipjarSuccess-shareList .Menu-dropdown .Menu-item:hover {
 background: transparent;
}

.TipjarSuccess-shareList .Menu-dropdown img {
 display: block;
 padding: 10px;
 width: 120px;
 height: 120px;
}

.TipjarEditDialog-tips {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.TipjarEditDialog-tipsError {
  color: #f75659;
}

.TipjarEditDialog-agreement a {
 color: #0080ff;
}

.TipjarEditDialog-agreement a:hover {
 text-decoration: underline;
}

.TipjarEditDialog {
  position: relative;
  color: #808080;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 14px;
  line-height: 1.7;
  opacity: 1;
  margin-top: 10px;
  padding: 0 16px 16px;
}

.TipjarEditDialog .Modal-buttons {
 -webkit-box-pack: end;
 -ms-flex-pack: end;
 justify-content: flex-end;
 margin-top: 16px;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
}

.TipjarEditDialog .Modal-buttons .Button--plain {
 height: 32px;
 line-height: 30px;
 width: 72px;
 padding: 0;
}

.TipjarEditDialog .Modal-buttons .Button--blue {
 margin-left: 16px;
}

.TipjarEditDialog-Modal .Modal-content {
 margin-top: 10px;
 padding: 0 16px 16px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.PostShare .MenuButton {
 font-size: 15px;
 font-weight: normal;
}

.PostShare .Menu-dropdown {
 top: 100%;
 width: 134px;
 left: 50%;
 margin-left: -66px;
}

.PostShare .Menu-item {
 border-top: 1px solid rgba(0, 0, 0, .08);
}

.PostShare .Menu-item:first-child {
 border-top: 0;
}

.PostShare-qrCode {
  width: 99px;
  height: 99px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  border-bottom: 2px solid rgba(0, 0, 0, .08);
  margin-bottom: 32px;
}

.Tab {
  margin-right: 16px;
  line-height: 64px;
  color: #333;
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
}

.Tab .Button {
 padding: 0 16px;
 color: #333;
 font-size: 16px;
}

.Tab.is-active {
  border-bottom: 2px solid #0080ff;
  color: #0080ff;
}

.Tab.is-active .Button {
 color: #0080ff;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.RNSModal-describe {
  color: #707070;
  margin-bottom: 24px;
}
.RNSModal-describe a {
 color: #0080ff;
 cursor: pointer;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Sticky.is-fixed {
 position: fixed;
 z-index: 2;
 -webkit-box-sizing: border-box;
 box-sizing: border-box; /* https://stackoverflow.com/questions/21278020/font-weight-turns-lighter-on-mac-safari */
 -webkit-font-smoothing: subpixel-antialiased;
}

.Sticky.is-absolute {
 position: absolute;
 top: auto;
 bottom: 0;
 z-index: 1;
 margin-bottom: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

.Sticky.is-absolute.is-bottom {
 top: 0;
 bottom: auto;
 margin-top: 0;
}

.Sticky.Sticky--CSSSticky {
 position: -webkit-sticky;
 position: sticky;
}

.Sticky--holder {
  visibility: hidden;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Notification {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 99;
  padding: 16px 20px;
  width: 680px;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
  font-size: 14px;
  text-align: center;
  pointer-events: all;
  border-radius: 0 0 4px 4px;
  -webkit-box-shadow: 0 1px 3px 0 #afbdcf;
          box-shadow: 0 1px 3px 0 #afbdcf;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.Notification-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 203;
  overflow: hidden;
  pointer-events: none;
}

.Notification-white {
  color: #8798ae;
  background: #fff;
}

.Notification-red {
  color: #fff;
  background: #f75659;
}

.Notification-red-ghost {
  color: #f75659;
  background: #fff;
}

@-webkit-keyframes spring-in {
  0% {
    -webkit-transform: translate3d(-50%, -100%, 0);
            transform: translate3d(-50%, -100%, 0);
  }

  60% {
    -webkit-transform: translate3d(-50%, -10%, 0);
            transform: translate3d(-50%, -10%, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
  }
}

@keyframes spring-in {
  0% {
    -webkit-transform: translate3d(-50%, -100%, 0);
            transform: translate3d(-50%, -100%, 0);
  }

  60% {
    -webkit-transform: translate3d(-50%, -10%, 0);
            transform: translate3d(-50%, -10%, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
  }
}

@-webkit-keyframes spring-out {
  from {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
  }

  to {
    -webkit-transform: translate3d(-50%, -100%, 0);
            transform: translate3d(-50%, -100%, 0);
  }
}

@keyframes spring-out {
  from {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
  }

  to {
    -webkit-transform: translate3d(-50%, -100%, 0);
            transform: translate3d(-50%, -100%, 0);
  }
}

.Notification-enter {
  -webkit-animation: spring-in .37s;
          animation: spring-in .37s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.Notification-leave {
  -webkit-animation: spring-out .24s;
          animation: spring-out .24s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Formula {
  display: inline-block;
  vertical-align: middle;
  background: no-repeat center;
  background-size: contain; /* 防止两端被截断 */
  font-size: 0;
}

.Formula.isEditable {
 cursor: pointer;
}

.Formula-image {
  max-width: 100%;
  opacity: 0; /* will see element on Edge even `visibility: hidden` set, don't know why */
  visibility: hidden;
}

.Formula-placeholder {
  opacity: 0;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.MathToolbar {
  display: block;
  padding: 4px 12px;
  border-radius: inherit inherit 0 0;
  background: #f7f8fa;
  border-bottom: 1px solid #e7eaf1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.MathToolbar-button {
  height: 28px;
  padding: 2px 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid transparent;
  vertical-align: middle;
}

.MathToolbar-button + .MathToolbar-button {
 margin-left: 16px;
}

.MathToolbar-button:hover {
 background: #fcfcfc;
 border-color: #ebeef5;
}

.MathToolbar-button .Icon {
 fill: #8590a6;
}

.MathToolbar-palettes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -4px;
  padding: 16px;
  max-width: 384px;
}

.MathToolbar-palettesButton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin: 4px;
  padding: 0;
  width: 24px;
  height: 24px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 16px;
  color: #8590a6;
  border-radius: 4px;
}

.MathToolbar-palettesButton:hover {
 background-color: #f7f8fa;
}

.MathToolbar-paletteIcon {
  max-width: calc(100% - 2px);
}

.MathToolbar-palettes--math {
  max-width: 380px;
}

.MathToolbar-palettes--math .MathToolbar-palettesButton {
 padding: 0 3px;
 width: 30px;
 height: 60px;
}

.MathToolbar-palettes--arrow .MathToolbar-palettesButton {
 height: 35px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.FormulaModal {
  width: 550px;
}

.FormulaModal-input {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 30px;
}

.FormulaModal-input .Input {
 padding: 6px 12px;
 min-height: 100px;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

.FormulaModal-formula {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 3px;
  background: #fff;
  border: 2px dashed #e7eaf1;
  border-radius: 3px;
  min-height: 106px;
  overflow-x: auto;
}

.FormulaModal-formula img {
 max-width: 100%;
}

.FormulaModal-buttonGroup {
  margin-top: 32px;
}

.FormulaModal-previewText {
  color: #9fadc7;
  font-size: 14px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.FocusPlugin--unfocused:hover {
  cursor: default;
  -webkit-box-shadow: 0 0 0 2px rgba(15, 136, 235, .3);
          box-shadow: 0 0 0 2px rgba(15, 136, 235, .3);
}

.FocusPlugin--focused {
  cursor: default;
  -webkit-box-shadow: 0 0 0 2px #0f88eb;
          box-shadow: 0 0 0 2px #0f88eb;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Image {
  max-width: 100%;
}

.Image--isBlock {
  display: block;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Editable-imageUploader {
  max-width: 600px;
}

.Editable-imageUploader-layout {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

.Editable-imageUploader-layout.is-fullWidth {
 width: 100%;
}

.Editable-imageUploader-image {
  display: block;
  max-width: 100%;
  opacity: .3;
}

.Editable-imageUploader-placeholder {
  height: 192px;
  background-color: #e7eaf1;
}

.Editable-imageUploader-status {
  position: absolute;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
}

.Editable-imageUploader-statusText {
  font-size: 28px;
  line-height: 40px;
  color: #8597a6;
}

.Editable-imageUploader-status.is-error .Editable-imageUploader-statusText {
  color: #e26d6d;
}

.Editable-imageUploader-retry {
  margin-top: 4px;
  font-size: 16px;
  line-height: 32px;
}

.Editable-imageUploader-retry .Button {
 font-size: inherit;
}

.Editable-imageUploader-retry .Icon {
 fill: currentColor;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.Embed embed {
 display: block;
 width: 100%;
 height: 100%;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.VideoCard {
  position: relative;
  overflow: hidden;
  border: solid 1px #e7eaf1;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 34, 77, .05);
          box-shadow: 0 1px 3px 0 rgba(0, 34, 77, .05);
}

.VideoCard-link {
  display: block;
}

.VideoCard-layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.VideoCard-poster {
  width: 120px;
  height: 90px;
  background-color: #e7eaf1;
}

.VideoCard-poster img {
 display: block;
 width: 100%;
 height: 100%;
 -o-object-fit: cover;
 object-fit: cover;
}

.VideoCard-video {
  position: relative;
  width: 100%;
}

.VideoCard-video::before {
 display: block;
 padding-top: 56.25%;
 content: "";
}

.VideoCard-video-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.VideoCard-thumbnail {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #e7eaf1;
}

.VideoCard-thumbnail img {
 display: block;
 width: 100%;
 height: 100%;
 -o-object-fit: cover;
 object-fit: cover;
}

.VideoCard-play-button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 64px;
  height: 64px;
  margin: auto;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.VideoCard-play-button .Icon {
 display: block;
}

.VideoCard--interactive .VideoCard-video:hover .VideoCard-play-button {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.VideoCard-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 15px 16px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.VideoCard-title {
  overflow: hidden;
  height: 30px;
  font-size: 18px;
  line-height: 30px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.VideoCard--interactive .VideoCard-link .VideoCard-content:hover .VideoCard-title {
  color: #175199;
}

.VideoCard-description {
  height: 25px;
  margin-top: 5px;
  line-height: 25px;
}

.VideoCard-source {
  display: inline-block;
  margin-right: 10px;
  color: #8590a6;
}

.VideoCard-badge {
  display: inline-block;
  padding: 0 8px;
  color: #8590a6;
  background-color: #f7f8fa;
  border-radius: 3px;
}

.VideoCard-player {
  width: 100%;
  height: 100%;
  background-color: #000;
}

.VideoCard-player iframe,
  .VideoCard-player .Embed {
 display: block;
 width: 100%;
 height: 100%;
}

.VideoCard-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.VideoCard-overlay.is-loading {
 opacity: 0;
}

.VideoCard-mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #000;
  -webkit-transition: opacity .3s, visibility .3s;
  transition: opacity .3s, visibility .3s;
}

.VideoCard-mask:not(.is-shown) {
 opacity: 0;
 visibility: hidden;
}

.VideoCard--mobile .VideoCard-poster {
 width: 100px;
 height: 75px;
}

.VideoCard--mobile .VideoCard-video:hover .VideoCard-play-button {
 -webkit-transform: scale(1);
 transform: scale(1);
}

.VideoCard--mobile .VideoCard-content {
 padding: 10px 12px;
}

.VideoCard--mobile .VideoCard-title {
 font-size: 16px;
}

.VideoCard--mobile .VideoCard-description {
 margin-top: 0;
 font-size: 12px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.Editable-video {
  margin: 16px 0;
  border-radius: 4px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.LoadingBar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 101;
  display: none;
  height: 2px;
  pointer-events: none;
  background: rgb(65, 151, 255);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.LoadingBar.is-active {
 display: block;
 -webkit-animation: LoadingBarForward 1s ease-in-out .8s infinite;
 animation: LoadingBarForward 1s ease-in-out .8s infinite;
}

@-webkit-keyframes LoadingBarForward {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }

  40% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  60% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@keyframes LoadingBarForward {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }

  40% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  60% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Editable-videoUploader {
  margin: 16px 0;
  border-radius: 4px;
}

.Editable-videoUploader-thumbnail {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
}

.Editable-videoUploader-text {
  text-align: center;
  color: #8597a6;
}

.Editable-videoUploader-status {
  font-size: 28px;
  line-height: 40px;
}

.Editable-videoUploader-size {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
}

.Editable-videoUploader-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  height: 4px;
  background-color: rgba(0, 0, 0, .05);
}

.Editable-videoUploader-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #0f88eb;
}

.Editable-videoUploader-progress-bar.is-error {
 background-color: #e26d6d;
}

.Editable-videoUploader-progress .LoadingBar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: rgba(255, 255, 255, .3);
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.VideoErrorCard-thumbnail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
}

.VideoErrorCard-error {
  font-size: 28px;
  line-height: 40px;
  text-align: center;
  color: #8597a6;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.Editable-videoError {
  margin: 16px 0;
  border-radius: 4px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Link + .Link {
  margin-left: 2px;
}

.Link[data-editable] {
  cursor: text !important;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.LinkModal-input {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.LinkModal-input + .LinkModal-input {
  margin-top: 10px;
}

.LinkModal-input .Input {
  margin-left: 8px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
/* Popover 缺陷，不支持定制到目标元素距离 */
.LinkBubble.Popover-content--top.Popover-content--arrowed {
  margin-top: -10px;
}

.LinkBubble.Popover-content--bottom.Popover-content--arrowed {
  margin-top: 10px;
}

.LinkBubble-content {
  display: block;
  padding: 7px 10px 7px 16px;
}

.LinkBubble-previewLink,
.LinkBubble-button {
  vertical-align: middle;
}

.LinkBubble-previewLink {
  display: inline-block;
  margin-right: 10px;
  max-width: 233px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.3;
  border-bottom: 1px solid transparent;
}

.LinkBubble-previewLink:hover {
 color: #175199;
 border-bottom-color: rgba(62, 122, 194, .72);
}

.LinkBubble-button {
  padding: 0 6px;
  vertical-align: 1px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.MentionSuggestions {
  position: absolute;
  z-index: 203;
  line-height: 1;
}

.MentionSuggestions-input {
  /* override Input */
  width: 200px;
  padding: 4px 6px;
  font-size: inherit;
}

.MentionSuggestions-input .Input {
 height: auto;
 background: transparent;
}

.MentionSuggestions-menu {
  width: 200px;
}

.MentionSuggestions-menu .Menu-item {
 padding: 0 10px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Dropzone {
  position: relative;
}

.Dropzone-cursor {
  position: absolute;
  left: 0;
  right: 0;
  margin: -1px 0;
  border-bottom: 2px solid #0f88eb;
  pointer-events: none;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Editable-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background: #fff;
  border-bottom: 1px solid #e7eaf1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.Sticky.is-fixed .Editable-toolbar,
  .isToolbarSticky .Editable-toolbar {
 border-top: none !important;
 border-bottom: none !important;
}

.Sticky.is-fixed .Editable-toolbar::after, .isToolbarSticky .Editable-toolbar::after {
 content: ' ';
 position: absolute;
 left: 0;
 top: 100%;
 width: 100%;
 pointer-events: none;
 height: 3px;
 background: radial-gradient(ellipse at 50% 1%, rgba(0, 0, 0, .1), rgba(255, 255, 255, 0) 80%);
}

.Editable-control,
.Editable-toolbar-separator {
  margin-right: 10px;
}

.Editable-control:last-child, .Editable-toolbar-separator:last-child {
 margin-right: 0;
}

.Editable-toolbar-separator {
  display: inline-block;
  width: 1px;
  height: 28px;
  vertical-align: middle;
  background-color: #e7eaf1;
}

.Editable-control {
  padding: 0 4px;
  min-width: 28px;
  height: 28px;
  cursor: pointer;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  white-space: nowrap;
  border: 1px solid transparent;
}

.Editable-control .Icon {
 fill: #8590a6;
}

.Editable-control:not(:disabled):hover {
 background: #fcfcfc;
 border-color: #ebeef5;
}

.Editable-control.is-active .Icon {
 fill: #0f88eb;
}

.Editable-control .Icon, .Editable-control span {
 vertical-align: middle;
}

.Editable-control .Icon + span {
 margin-left: 6px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Editable-videoModal {
  display: block;
}

.Editable-videoModal-typeButton {
  font-size: 20px;
  font-weight: 400;
  color: inherit;
}

.Editable-videoModal-typeButton.is-active {
 font-weight: 500;
 color: #0f88eb;
}

.Editable-videoModal-typeDivider {
  display: inline-block;
  height: 20px;
  margin: 0 40px;
  border-right: 1px solid #e7eaf1;
  vertical-align: middle;
}

.Editable-videoModal-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 220px;
}

.Editable-videoModal-uploader {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 220px;
  border: 2px dashed #e7eaf1;
  border-radius: 10px;
  cursor: pointer;
}

.Editable-videoModal-uploader:hover {
 border-color: #9fadc7;
}

.Editable-videoModal-uploader:hover .Icon {
 fill: #9fadc7;
}

.Editable-videoModal-uploader input {
 display: none;
}

.Editable-videoModal-uploader-icon {
  text-align: center;
  display: block;
}

.Editable-videoModal-uploader-icon .Icon {
 vertical-align: middle;
 fill: #e7eaf1;
}

.Editable-videoModal-uploader-text {
  margin-top: 10px;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
}

.Editable-videoModal-uploader-tip {
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  color: #8590a6;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Editable-languageSuggestions {
  position: fixed;
  z-index: 203;
}

.Editable-languageSuggestionsInput {
  /* simulate a search select */
  cursor: pointer;
}

.Editable-languageSuggestionsInput input {
 cursor: inherit;
}

.Editable-languageSuggestionsInput input:focus {
 cursor: text;
}

.Editable-languageSuggestionsMenu {
  max-height: 300px;
  margin-top: -8px; /* HACK: prevent mouseover to other block */
  margin-bottom: -8px; /* HACK: prevent mouseover to other block */
  overflow-y: auto;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Editable-notification-layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.Editable-notification-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin: 0 -12px;
}

.Editable-notification-action {
  margin: 0 12px;
}

.Editable .RichText {
  cursor: text;
}

.public-DraftEditorPlaceholder-root {
  position: absolute;
  pointer-events: none;
}

.Editable--hidePlaceholder .public-DraftEditorPlaceholder-root {
 display: none;
}

/* 使连续的 block 不会贴在一起，并且间距与 RichText 一致 */
.Editable-styled,
.Editable-unstyled {
  margin: 0 0 .72em;
}
.Editable-styled:last-child, .Editable-unstyled:last-child { /* 方便 block 样式容易被覆盖重新定义（如 .RichText blockquote） */
 margin-bottom: 0;
}

.DraftEditor-root blockquote + blockquote {
 margin-top: -1em;
}

.DraftEditor-root pre.public-DraftStyleDefault-pre {
 overflow: hidden;
 border-radius: 4px;
}

.DraftEditor-root pre.public-DraftStyleDefault-pre pre {
 padding: 0;
 margin: 0;
 border-radius: 0;
}

.DraftEditor-root .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1, .DraftEditor-root .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1 {
 margin-left: 2em;
}

.DraftEditor-root .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth2, .DraftEditor-root .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2 {
 margin-left: 4em;
}

.DraftEditor-root .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth3, .DraftEditor-root .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3 {
 margin-left: 6em;
}

.DraftEditor-root .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth4, .DraftEditor-root .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4 {
 margin-left: 8em;
}

.DraftEditor-root .public-DraftStyleDefault-orderedListItem {
 position: relative;
 list-style-type: none;
}

.DraftEditor-root .public-DraftStyleDefault-orderedListItem::before {
 position: absolute;
 left: -36px;
 width: 30px;
 text-align: right;
}

.DraftEditor-root .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset {
 counter-reset: ol0;
}

.DraftEditor-root .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth0::before {
 content: counter(ol0) ". ";
 counter-increment: ol0;
}

.DraftEditor-root .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset {
 counter-reset: ol1;
}

.DraftEditor-root .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1::before {
 content: counter(ol1) ". ";
 counter-increment: ol1;
}

.DraftEditor-root .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset {
 counter-reset: ol2;
}

.DraftEditor-root .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2::before {
 content: counter(ol2) ". ";
 counter-increment: ol2;
}

.DraftEditor-root .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset {
 counter-reset: ol3;
}

.DraftEditor-root .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3::before {
 content: counter(ol3) ". ";
 counter-increment: ol3;
}

.DraftEditor-root .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset {
 counter-reset: ol4;
}

.DraftEditor-root .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4::before {
 content: counter(ol4) ". ";
 counter-increment: ol4;
}

/*
 * HACK: fix http://ph.in.zhihu.com/T81462 on IE11 and Edge
 * see https://github.com/facebook/draft-js/issues/926
 */
/* stylelint-disable-next-line selector-type-no-unknown */
_:-ms-lang(x), .public-DraftStyleDefault-block {
  font-size: 0;
}
_:-ms-lang(x) *, .public-DraftStyleDefault-block * {
 font-size: 14px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
/* stylelint-disable */
/**
   * prism.js default theme for JavaScript, CSS and HTML
   * Based on dabblet (http://dabblet.com)
   * @author Lea Verou
   */
.DraftEditor-root code[class*="language-"],
  .DraftEditor-root pre[class*="language-"] {
 color: black;
 background: none;
 text-shadow: 0 1px white;
 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 text-align: left;
 white-space: pre;
 word-spacing: normal;
 word-break: normal;
 word-wrap: normal;
 line-height: 1.5;
 -moz-tab-size: 4;
 -o-tab-size: 4;
 tab-size: 4;
 -webkit-hyphens: none;
 -ms-hyphens: none;
 hyphens: none;
}
.DraftEditor-root pre[class*="language-"]::-moz-selection, .DraftEditor-root pre[class*="language-"] ::-moz-selection, .DraftEditor-root code[class*="language-"]::-moz-selection, .DraftEditor-root code[class*="language-"] ::-moz-selection {
 text-shadow: none;
 background: #b3d4fc;
}
.DraftEditor-root pre[class*="language-"]::selection, .DraftEditor-root pre[class*="language-"] ::selection, .DraftEditor-root code[class*="language-"]::selection, .DraftEditor-root code[class*="language-"] ::selection {
 text-shadow: none;
 background: #b3d4fc;
}
@media print {
 .DraftEditor-root code[class*="language-"],
  	.DraftEditor-root pre[class*="language-"] {
  text-shadow: none;
 }
}
/* Code blocks */
.DraftEditor-root pre[class*="language-"] {
 padding: 1em;
 margin: .5em 0;
 overflow: auto;
}
.DraftEditor-root :not(pre) > code[class*="language-"],
  .DraftEditor-root pre[class*="language-"] {
 background: #f5f2f0;
}
/* Inline code */
.DraftEditor-root :not(pre) > code[class*="language-"] {
 padding: .1em;
 border-radius: .3em;
 white-space: normal;
}
.DraftEditor-root .token.comment,
  .DraftEditor-root .token.prolog,
  .DraftEditor-root .token.doctype,
  .DraftEditor-root .token.cdata {
 color: slategray;
}
.DraftEditor-root .token.punctuation {
 color: #999;
}
.DraftEditor-root .namespace {
 opacity: .7;
}
.DraftEditor-root .token.property,
  .DraftEditor-root .token.tag,
  .DraftEditor-root .token.boolean,
  .DraftEditor-root .token.number,
  .DraftEditor-root .token.constant,
  .DraftEditor-root .token.symbol,
  .DraftEditor-root .token.deleted {
 color: #905;
}
.DraftEditor-root .token.selector,
  .DraftEditor-root .token.attr-name,
  .DraftEditor-root .token.string,
  .DraftEditor-root .token.char,
  .DraftEditor-root .token.builtin,
  .DraftEditor-root .token.inserted {
 color: #690;
}
.DraftEditor-root .token.operator,
  .DraftEditor-root .token.entity,
  .DraftEditor-root .token.url,
  .DraftEditor-root .language-css .token.string,
  .DraftEditor-root .style .token.string {
 color: #a67f59;
 background: hsla(0, 0%, 100%, .5);
}
.DraftEditor-root .token.atrule,
  .DraftEditor-root .token.attr-value,
  .DraftEditor-root .token.keyword {
 color: #07a;
}
.DraftEditor-root .token.function {
 color: #DD4A68;
}
.DraftEditor-root .token.regex,
  .DraftEditor-root .token.important,
  .DraftEditor-root .token.variable {
 color: #e90;
}
.DraftEditor-root .token.important,
  .DraftEditor-root .token.bold {
 font-weight: bold;
}
.DraftEditor-root .token.italic {
 font-style: italic;
}
.DraftEditor-root .token.entity {
 cursor: help;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.CommentEditor {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.CommentEditor-avatar {
  margin-right: 16px;
}

.CommentEditor-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.CommentEditor-input .Input {
 min-height: 46px;
 margin-bottom: 0;
 padding-top: 5px;
 padding-bottom: 0;
}

.CommentEditor-input .DraftEditor-root .Editable-unstyled:not(:last-child) {
 margin-bottom: 0;
}

.CommentEditor-input .RichText a:not(.video-box):not(.link-box) {
 margin-right: 3px;
 color: #0080ff;
 text-decoration: none;
}

.CommentEditor-input .RichText a:not(.video-box):not(.link-box):hover {
 color: #0080ff;
 text-decoration: underline;
}

.CommentEditor-input--focus .Input-wrapper {
 border-color: rgba(0, 128, 255, .5);
}

.CommentEditor-actions {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-top: 20px;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.CommentEditor-actions .Button {
 width: 80px;
 height: 34px;
 margin-left: 16px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ReportMenu-inner {
  min-height: 192px;
  margin-bottom: 30px;
  font-size: 14px;
  line-height: 1.75;
}

.ReportMenu-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 12px 0;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid #f0f2f7;
  outline: none;
}

.ReportMenu-itemValue {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.ReportMenu-itemCheck {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.ReportMenu-itemCheck:checked + .ReportMenu-itemCheckIcon {
 opacity: 1;
}

.ReportMenu-itemCheckIcon {
  fill: #0f88eb;
  opacity: 0;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
}

.ReportMenu-paragraph {
  white-space: pre-wrap;
  list-style: none;
}

.ReportMenu-paragraph--light {
  margin-top: 1em;
  color: #8590a6;
}

.ReportMenu-check {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ReportMenu-textarea {
  width: 100%;
}

.ReportMenu-link {
  color: #175199;
}

.ReportMenu-link:hover {
 text-decoration: underline;
}

.ReportMenu-link--light {
  text-decoration: underline;
}

.ReportMenu-errorText {
  width: 100%;
  margin-top: 16px;
  color: #f00;
  font-size: 15px;
  text-align: right;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Report {
  margin-top: 6px;
}

.ReportButton {
  font-size: 15px;
  font-weight: normal;
}

.ReportModal {
  width: 400px;
}

@media (max-width: 660px) {

 .ReportModal {
  width: 100%
 }
}

.ReportMenu {
  display: block;
}

.ReportMenu .ModalButtonGroup--horizontal {
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
}

@media (max-width: 660px) {

 .ReportMenu .ModalButtonGroup--horizontal {
  padding: 0 16px
 }
}



@media (max-width: 660px) {

 .ReportMenu-inner {
  margin: 16px
 }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.CommentItem {
  position: relative;
  padding-left: 60px;
  margin-top: 32px;
}

.CommentItem--deleted {
  border: solid #f0f0f0;
  border-width: 1px 0;
  padding: 16px 0;
}

.CommentItem--deleted + .CommentItem--deleted {
 border-top: 0;
 margin-top: 0;
}

.CommentItem-author {
  position: absolute;
  left: 0;
}

.CommentItem-authorTitle {
  color: #808080;
}

.CommentItem-headWrapper {
  position: relative;
}

.CommentItem-headWrapper a {
 color: #333;
 font-weight: 700;
}

.CommentItem-head {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  line-height: 24px;
}

.CommentItem-head--rightPad {
  margin-right: 86px;
}

.CommentItem-context {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.CommentItem-replySplit {
  margin: 0 6px;
}

.CommentItem-conversationButton {
  position: absolute;
  right: 0;
  height: 24px;
  line-height: 24px;
}

.CommentItem-reviewingBadge {
  margin-left: 6px;
}

.CommentItem-reviewingMenu {
  padding: 0;
}

.CommentItem-reviewingMenu .MenuButton {
 height: 24px;
 width: 24px;
 padding: 0;
}

.CommentItem-reviewingMenu .MenuButton .icon {
 vertical-align: 0;
}

.CommentItem-reviewingMenu .Menu-dropdown {
 top: 36px;
 margin-left: -134px;
 width: 272px;
}

.CommentItem-reviewingMenu .Menu-item {
 white-space: nowrap;
 text-indent: 0;
 text-align: center;
}

.CommentItem-reviewingMenu .Menu-item:hover {
 cursor: default;
 background: transparent;
}

.CommentItem-reviewingMenu .Triangle {
 position: absolute;
 top: 1px;
 left: 50%;
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
}

.CommentItem-content {
  min-height: 22px;
  margin: 8px 0;
  font-size: 15px;
  line-height: 24px;
  word-break: break-word;
}

.CommentItem-content a {
 color: #259;
}

.CommentItem-content a:hover {
 text-decoration: underline;
}

.CommentItem-foot {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  color: #808080;
  font-size: 14px;
  line-height: 30px;
}

.CommentItem-like {
  position: absolute;
  right: 0;
}

.CommentItem-like--empty {
  display: none;
}

.CommentItem-action {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 30px;
  line-height: 30px;
  display: none;
  margin-left: 8px;
}

.CommentItem-action + .CommentItem-action {
 margin-left: 8px;
}

.CommentItem:hover .CommentItem-action {
 display: block;
}

.CommentItem-action.Button:hover, .CommentItem-action .Button:hover {
 color: #333;
}

.CommentItem-action--visible {
  display: block;
}

.CommentItem-inlineReply {
  padding: 20px 0;
}

.CommentItem-actionReport {
  margin: 0;
}

.CommentItem-actionReport .ReportButton {
 font-size: 14px;
}

@media (max-width: 420px) {
  .CommentItem .icon {
  display:none;
 }

  .CommentItem-action {
    display: block;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.PostComment {
  padding-bottom: 48px;
}

.PostComment .PostComment-mainEditor .CommentEditor-actions {
 display: none;
}

.PostComment .PostComment-mainEditor.CommentEditor--opened .CommentEditor-actions {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
}

.PostComment-blockTitle,
.PostComment-titleTabs {
  position: relative;
  z-index: 3;
}

.PostComment-orgTab {
  position: relative;
}

.PostCommentDisabled {
  padding: 13px 0;
  background: #f7f8f9;
  color: #808080;
  text-align: center;
  border-radius: 4px;
  font-size: 15px;
}

.PostComment .CommentEditor + .PostCommentDisabled{
  margin-top: 24px;
}

.PostCommentList {
  margin-top: 32px;
}

.PostCommentList .CommentItem:first-child {
 margin-top: 0;
}

.PostCommentList--loading {
  position: relative;
}

.PostCommentList--loading::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 100%;
 background: rgba(255, 255, 255, .8);
 z-index: 1;
}

.PostComment-spinner {
  margin: 30px;
}

.PostCommentList-spinner {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
}

.PostComment-split {
  font-size: 14px;
  margin: 32px auto 0;
  width: 500px;
  text-align: center;
}

.PostComment-split .BlockTitle-title {
 padding: 0 16px;
 font-weight: 400;
 color: #808080;
}

.PostComment-pagination {
  margin-top: 16px;
}

.ConversationDialog .Spinner {
 margin: 120px auto;
}

.ConversationDialog-list {
  max-height: calc(60vh - 80px);
  overflow: auto;
  padding-bottom: 40px;
}

.ConversationDialog-list .CommentItem {
 padding-right: 16px;
}

.ConversationDialog-list .CommentItem .CommentItem-like {
 right: 16px;
}

.ConversationDialog-list .CommentItem:first-child {
 margin-top: 0;
}

@media (max-width: 660px) {

 .ConversationDialog-list {
  padding: 16px;
  max-height: none;
  max-height: initial
 }
}

.ConversationDialog-editor {
  padding: 16px;
  margin: 24px -16px -16px;
  border-top: 1px solid rgba(0, 0, 0, .06);
}

.PostCommentSetting-menu {
  display: inline-block;
}

.PostCommentSetting-menu .Menu-dropdown {
 width: 278px;
 margin-left: -120px;
 top: 100%;
}

.PostCommentSetting-menu .Menu-dropdown li > .Button {
 padding: 0;
}

.PostComment-orgTab .PostCommentSetting-menu {
 position: absolute;
 top: 20px;
 right: 0;
 z-index: 4;
}

.PostCommentSetting-button {
  margin-left: 6px;
}

.PostCommentSetting-label {
  display: block;
  padding-left: 10px;
  height: 54px;
  line-height: 54px;
  font-weight: 400;
  cursor: pointer;
}

@media (max-width: 660px) {
  .PostComment-mainEditor,
  .PostCommentList {
    padding-left: 16px;
    padding-right: 16px;
  }

  .PostComment-split {
    width: 100%;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.PostReviewComment {
  position: absolute;
  background-color: #fff;
  top: 75px;
  right: 16px;
  height: 70vh;
  width: 240px;
  padding-bottom: 60px;
  z-index: 4;
}

.PostReviewComment--close {
  height: auto;
  padding-bottom: 0;
}

.PostReviewComment--close .PostReviewComment-editor,
  .PostReviewComment--close .PostReviewComment-list,
  .PostReviewComment--close .PostReviewComment-description,
  .PostReviewComment--close .PostReviewComment-empty {
 display: none;
}

.PostReviewComment-title {
  font-size: 18px;
  padding: 16px;
  font-weight: 700;
}

.PostReviewComment-description {
  font-size: 12px;
  height: 12px;
  line-height: 12px;
  padding-left: 16px;
  margin-bottom: 10px;
  color: #808080;
}

.PostReviewComment-editor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 6px 16px 16px;
  border-top: 1px solid rgba(0, 0, 0, .16);
}

.PostReviewComment-editor .Editable {
 min-height: auto;
}

.PostReviewComment-editor .RichText {
 min-height: auto !important;
}

.PostReviewComment-editor .DraftEditor-root {
 padding-left: 0;
}

.PostReviewComment-editor .CommentEditor-actions {
 display: none;
}

.PostReviewComment-editor--opened .CommentEditor-actions {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
}

.PostReviewComment-list {
  padding: 0 13px 0 16px;
  height: calc(70vh - 140px);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.PostReviewComment-list .Spinner {
 margin: 30px auto;
}

.PostReviewComment-empty {
  position: absolute;
  height: 100%;
  left: 0;
  right: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #b3b3b3;
}

.PostReviewComment-empty i {
 font-size: 64px;
}

.PostReviewComment-list--editorOpen {
  height: calc(70vh - 194px);
}

.PostReviewCommentItem {
  padding-left: 0;
  position: relative;
}

.PostReviewCommentItem:first-child {
 margin-top: 0;
}

.PostReviewCommentItem .CommentItem-headWrapper,
  .PostReviewCommentItem .CommentItem-foot {
 padding-left: 60px;
}

.PostReviewCommentItem .CommentItem-head {
 height: 36px;
 line-height: 20px;
 padding-bottom: 16px;
 overflow: hidden;
 white-space: nowrap;
 font-size: 13px;
}

.PostReviewCommentItem .CommentItem-content {
 font-size: 13px;
 color: #333;
}

.PostReviewCommentItem .CommentItem-foot {
 position: absolute;
 top: 23px;
 left: 0;
 font-size: 13px;
 line-height: 13px;
}

.PostReviewCommentItem .CommentItem-foot .CommentItem-action:not(.CommentItem-actionRemove) {
 display: none;
}

.PostReviewCommentItem .CommentItem-foot .CommentItem-actionRemove {
 font-size: 13px;
 height: 13px;
 line-height: 13px;
}

.PostReviewCommentItem .CommentItem-foot .CommentItem-actionRemove .icon {
 display: none;
}

.PostReviewCommentItem .CommentItem-foot .CommentItem-actionRemove:before {
 content: '\B7';
 margin-right: 6px;
}

.PostReviewCommentItem.is-published .CommentItem-actionRemove {
  display: none;
}

.PostReviewComment-close,
.PostReviewComment-toggle {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 14px;
  right: 16px;
  cursor: pointer;
  color: #808080;
}

.PostReviewComment-toggle i {
 display: inline-block;
}

.PostReviewComment-toggle--open i {
 -webkit-transform: rotate(180deg);
 transform: rotate(180deg);
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.PostManage .Menu-dropdown {
 top: 100%;
 width: 88px;
 left: 50%;
 margin-left: -44px;
}

.PostManage .Menu-dropdown .Button {
 text-align: center;
 padding: 0;
}

.PostManage .Menu-dropdown .Menu-item + .Menu-item {
 border-top: 1px solid rgba(0, 0, 0, .08);
}

.PostManage-deleteButton {
  margin-top: 6px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

/* Contributes block title 的 margin 要比其他的小一些 */

.Contributes .BlockTitle {
 margin-bottom: 12px;
}

.Contributes-list {
  /* hack: 使用 maxHeight 控制整体高度，需要使用 height 代替 margin-bottom */
}

.Contributes-listItem {
  position: relative;
  padding: 16px 0;
}

.ContributesItem {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ContributesItem-avatar {
  margin-right: 12px;
}

.ContributesItem-avatar img {
 width: 48px;
 height: 48px;
 vertical-align: top;
 border-radius: 7px;
}

.ContributesItem-info {
  -ms-flex-item-align: stretch;
      align-self: stretch;
  font-size: 14px;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  overflow: hidden;
}

.ContributesItem-nameLine {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1.4;
}

.ContributesItem-name {
  font-size: 16px;
  font-weight: 700;
}

.ContributesItem-state {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  cursor: pointer;
}

.ContributesItem-state span {
 vertical-align: middle;
}

.ContributesItem-state ._hover {
 display: none;
}

.ContributesItem-state:hover ._default {
 display: none;
}

.ContributesItem-state:hover ._hover {
 display: inline;
 margin: 0;
}

.ContributesItem-intro {
  margin-top: 6px;
  color: #808080;
  line-height: 1.4;
}

.ContributesItem-entrance {
  margin-left: auto;
  font-size: 14px;
  color: #50c87e;
  min-width: 60px;
  text-align: center;
}

.ContributesItem-entrance:hover {
 color: #0ca547;
}

.ContributesItem-openAppButton {
  background: #F4F4F4;
  color: #0080ff;
  font-weight: 700;
  line-height: 22px;
  margin-left: 6px;
  padding: 0 6px;
  size: 12px;
}

@media (max-width: 660px) {
  .Contributes-list {
    padding: 0 16px;
    max-width: 100vw;
  }
}

@media (max-width: 420px) {
  .ContributesItem-entrance {
    display: none;
  }
}

.appview .Contributes-list {
 padding: 0;
}

.appview .ContributesItem-entrance {
 display: none;
}

.appview .Contributes-listItem {
 border-bottom-width: 1px;
 border-bottom-style: solid;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.TopRightPanel {
  position: fixed;
  top: 75px;
  right: 16px;
  width: 240px;
  min-height: 177px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 4px;
  background: #fff;
  -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
          box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
  z-index: 101;
}

.TopRightPanel-title {
  padding: 16px;
  font-size: 18px;
  font-weight: 700;
}

.TopRightPanel-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0 16px;
  display: block;
  line-height: 1.6;
  font-size: 14px;
  color: #808080;
}

.TopRightPanel-content a {
 color: #808080;
}

.TopRightPanel-content a:hover {
 text-decoration: underline;
}

.TopRightPanelButtonGroup {
  padding: 16px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.TopRightPanelButtonGroup .Button {
 height: 32px;
 width: 72px;
 line-height: 30px;
}

.TopRightPanelButtonGroup .Button--plain {
 width: auto;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.MaxLength {
  font-size: 14px;
  color: #8590a6;
}
.MaxLength.is-error {
 color: #f75659;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.BounceLoading {
  position: relative;
}

.BounceLoading .BounceLoading-child {
 position: absolute;
 background-color: #0f88eb;
 border-radius: 50%;
 -webkit-transform-origin: center;
 transform-origin: center;
 -webkit-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
 -webkit-animation-name: Bounce;
 animation-name: Bounce;
 -webkit-animation-timing-function: ease-in-out;
 animation-timing-function: ease-in-out;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}

@-webkit-keyframes Bounce {
  0%, 100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }

  50% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}

@keyframes Bounce {
  0%, 100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }

  50% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.PlaceHolder-inner {
  position: relative;
  overflow: hidden;
  background: #f6f7f9;
}

.PlaceHolder-mask {
  position: relative;
  min-width: 100%;
  vertical-align: top;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.PlaceHolder-bg {
  position: absolute;
  width: 200%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#f6f7f9), color-stop(20%, #e9ebee), color-stop(40%, #f6f7f9), to(#f6f7f9));
  background: linear-gradient(to right, #f6f7f9 0%, #e9ebee 20%, #f6f7f9 40%, #f6f7f9 100%);
  -webkit-animation: linear-double 1s linear 1ms infinite forwards;
          animation: linear-double 1s linear 1ms infinite forwards;
}

@-webkit-keyframes linear-double {
  0% {
    -webkit-transform: translateX(-56%);
            transform: translateX(-56%);
  }

  100% {
    -webkit-transform: translateX(56%);
            transform: translateX(56%);
  }
}

@keyframes linear-double {
  0% {
    -webkit-transform: translateX(-56%);
            transform: translateX(-56%);
  }

  100% {
    -webkit-transform: translateX(56%);
            transform: translateX(56%);
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.InfiLoader--bounceShown {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Holder {
  height: 14px;
  margin-bottom: 16px;
  background: #f7f8fa;
  border-radius: 2px;
}

.Holder:last-child {
 margin-bottom: 0;
}

.Holder--inline,
.Holder--icon,
.Holder--button,
.Holder--avatar {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: bottom;
}

.Holder--title {
  height: 18px;
}

.Holder--icon {
  width: 14px;
  margin-right: 8px;
  border-radius: 999px;
}

.Holder--button {
  width: 96px;
  height: 34px;
  border-radius: 3px;
}

.Holder--button + .Holder--button {
 margin-left: 16px;
}

.Holder--avatar {
  width: 24px;
  height: 24px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Favlists-items {
  max-height: 335px;
  min-height: 140px;
  margin-bottom: 40px;
  overflow-x: hidden;
  overflow-y: auto;
}

.Favlists-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e7eaf1;
}

.Favlists-itemInner {
  overflow: hidden;
  margin-right: 20px;
}

.Favlists-itemName {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Favlists-itemNameText {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Favlists-itemIcon {
  margin-left: 6px;
}

.Favlists-itemIcon .Icon {
 vertical-align: baseline;
}

.Favlists-itemContent {
  font-size: 14px;
  color: #8590a6;
  margin-top: 4px;
}

.Favlists-updateButton {
  width: 76px;
}

.Favlists-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 16px 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.Favlists-mobileActions {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: calc(16px - 4) 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-top: 1px solid #ebeef5;
  background: #fff;
}

.Favlists-mobileActions .Favlists-addButton:last-child:first-child {
 width: 100%;
}

.Favlists-mobileActions .Button {
 -webkit-box-flex: 1;
 -ms-flex: 1;
 flex: 1;
}

.Favlists-mobileActions .Button:first-child:not(:last-child) {
 margin-right: 8px;
}

.Favlist-empty {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.Favlist-emptyContent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

.Favlist-emptyTip {
  margin-top: 30px;
  font-size: 15px;
  color: #9aaabf;
}

.Favlists-addButton {
  width: 220px;
}

.Favlists-addItem {
  margin-bottom: 8px;
}

.Favlists-titleInput, .Favlists-descritionInput {
  width: 100%;
  height: auto;
  padding: 8px 12px;
}

.Favlists-privacyOption {
  display: block;
  margin-bottom: 6px;
  overflow: auto;
  font-size: 14px;
}

.Favlists-privacyOptionTips {
  margin-left: 4px;
  color: #8590a6;
}

.Favlists-privacyOptionRadio {
  display: inline-block;
  width: 14px;
  height: 14px;
  padding: 2px;
  margin: 0 4px 0 0;
  vertical-align: middle;
  border: 2px solid #e7eaf1;
  border-radius: 50%;
  -webkit-transition: background-color, border-color 300ms;
  transition: background-color, border-color 300ms;
  background-clip: content-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.Favlists-privacyOptionRadio:checked {
 background-color: #0f88eb;
 border-color: #0f88eb;
}

.Favlists-privacyOptionRadio:focus {
 outline: none;
}

.Favlists-inputTips {
  padding-top: 8px;
  text-align: right;
}

.Favlists-favButton {
  width: 72px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Fav {
  margin-top: 6px;
}

.Favlists-item,
.Favlists-itemName {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

@media (max-width: 660px) {

 .Favlists-content {
  padding: 16px
 }
}

@media (max-width: 660px) {

 .Favlists-addButton {
  position: absolute;
  bottom: 10px;
  height: 36px;
  width: 343px
 }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.RadioButtons {
  font-size: 14px;
  color: #404040;
}
.RadioButtons-item {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 cursor: pointer;
 padding: 11px 0;
 border-bottom: 1px solid #f0f2f7;
}
@media (max-width: 660px) {
 .RadioButtons-item {
  min-height: 48px;
  line-height: 20px
 }
}
.RadioButtons-text {
 -webkit-box-flex: 1;
 -ms-flex: 1;
 flex: 1;
}
.RadioButtons-input {
 display: inline-block;
 width: 14px;
 height: 14px;
 padding: 2px;
 margin: 0 4px 0 0;
 vertical-align: middle;
 border: 2px solid #e7eaf1;
 border-radius: 50%;
 -webkit-transition: background-color, border-color 300ms;
 transition: background-color, border-color 300ms;
 background-clip: content-box;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}
.RadioButtons-input:checked {
 background-color: #0f88eb;
 border-color: #0f88eb;
}
.RadioButtons-input:focus {
 outline: none;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.AddAnnotationModal-description {

 color: #9aaabf;

 font-size: 14px;

 margin: 20px 0;
}

.AddAnnotationModal-body {

 max-height: 300px;

 overflow: scroll;

 margin: 0 -20px;

 padding: 0 20px;
}

@media (max-width: 660px) {

 .AddAnnotationModal-body {

  margin: 16px;

  padding: 0;

  max-height: inherit
 }
}

@media (max-width: 660px) {

 .AddAnnotationModal-buttonGroup {

  position: absolute;

  bottom: 10px;

  width: 100%;

  height: 36px;

  padding: 0 16px
 }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

@media (max-width: 660px) {

 .CancelAnnotationModal {

  padding: 16px
 }
}

@media (max-width: 660px) {

 .CancelAnnotationModal-Input {

  min-height: 132px
 }
}

@media (max-width: 660px) {

 .CancelAnnotationModal-CancelButton {

  position: absolute;

  bottom: 10px;

  width: 343px !important;

  height: 36px
 }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.AnnotationSetting-MenuItem {
  font-size: 14px;
  margin: 8px 16px;
  color: #000;
  cursor: pointer;
}

.AnnotationSetting-Icon {
  margin-top: 6px;
  cursor: pointer;
}

.Annotation-markSummary p {
 margin: 0;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.TopicItem-wrapper {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.TopicItem {
  margin: 0 16px 16px 0;
  padding: 0 15px;
  height: 30px;
  line-height: 30px;
  max-width: 100%;
  background: rgba(0, 0, 0, .06);
  color: #666768;
  border-radius: 15px;
  text-align: center;
  font-size: 14px;
}

.TopicItem-remove {
  width: 16px;
  height: 16px;
  line-height: 16px;
  margin-left: 7px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Video {
  margin: 12px 0;
}

.Video .VideoCard-layout {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
}

.appview--dark .Video {
 filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.9" /><feFuncG type="linear" slope="0.9" /><feFuncB type="linear" slope="0.9" /></feComponentTransfer></filter></svg>#filter');
}

.appview--dark .Video .VideoCard {
 border-color: rgba(255, 255, 255, .15);
 -webkit-box-shadow: none;
 box-shadow: none;
 filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.9" /><feFuncG type="linear" slope="0.9" /><feFuncB type="linear" slope="0.9" /></feComponentTransfer></filter></svg>#filter');
}

.appview--dark .Video .VideoCard .VideoCard-poster {
 filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.9" /><feFuncG type="linear" slope="0.9" /><feFuncB type="linear" slope="0.9" /></feComponentTransfer></filter></svg>#filter');
 -webkit-filter: brightness(.9);
 filter: brightness(.9);
}

.appview--dark .Video .VideoCard .VideoCard-title {
 color: inherit;
}

.appview--dark .Video .VideoCard .VideoCard-source {
 color: inherit;
 opacity: 0.7;
}

.appview--dark .Video .VideoCard .VideoCard-badge {
 color: inherit;
 opacity: 0.7;
 background-color: rgba(255, 255, 255, .2);
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.GifPlayer {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 0;
  cursor: pointer;
}

.GifPlayer::after {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -30px;
 margin-top: -30px;
 content: '';
 width: 60px;
 height: 60px;
 pointer-events: none;
 -webkit-transform: scale(1);
 transform: scale(1);
 background: url() no-repeat;
}

.GifPlayer.is-playing::after {
 -webkit-transition-duration: .3s;
 transition-duration: .3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
 -webkit-transform: scale(.3);
 transform: scale(.3);
 opacity: 0;
}

.GifPlayer.is-loading::after {
 background: url() no-repeat;
}

.GifPlayer.is-refreshed::after {
 background: url() no-repeat;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.RichText-imagePlaceholder {
  margin: 1em auto;
  padding: 40px 0;
  text-align: center;
  font-size: 15px;
  color: rgba(0, 0, 0, .2);
  background: rgba(0, 0, 0, .05);
}

.appview--dark .RichText-imagePlaceholder {
  color: rgba(255, 255, 255, .2);
  background: rgba(0, 0, 0, .1);
}

.RichText a {
 word-break: break-all;
}

.RichText .Formula {
 display: inline-block;
}

.RichText .Formula .Formula-image {
 display: inline;
}

.appview .RichText .video-box[data-lens-id]:not([data-lens-id=""]) {
 border: solid 1px #e7eaf1;
 -webkit-box-shadow: none;
 box-shadow: none;
 padding-top: 56.25%;
}

.appview .RichText .video-box[data-lens-id]:not([data-lens-id=""]):before {
 content: '';
 border: solid 3px #fff;
 z-index: 2;
 background: rgba(0, 0, 0, .3);
 border-radius: 50px;
 height: 60px;
 position: absolute;
 width: 60px;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
}

.appview .RichText .video-box[data-lens-id]:not([data-lens-id=""]):after {
 content: '';
 display: block;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 11.5px 0 11.5px 18px;
 border-color: transparent transparent transparent #fff;
 position: absolute;
 z-index: 3;
 border-radius: 2px;
 opacity: .9;
 left: 2%;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
}

.appview .RichText .video-box[data-lens-id]:not([data-lens-id=""]) .thumbnail {
 position: absolute;
 -o-object-fit: cover;
 object-fit: cover;
 left: 0;
 top: 0;
 height: 100%;
 width: 100%;
}

.appview .RichText .video-box[data-lens-id]:not([data-lens-id=""]) .content {
 display: none;
}

.appview .RichText a.member_mention:hover {
 text-decoration: none;
}

.appview--dark .RichText img[eeimg] {
 -webkit-filter: invert();
 filter: invert();
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.PostListItem {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  contain: layout;
}

.PostListItem-titleImageWrapper {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding-right: 16px;
}

.PostListItem-titleImage {
  height: 180px;
  width: 240px;
  border-radius: 4px;
  vertical-align: top;
  -o-object-fit: cover;
     object-fit: cover;
}

.PostListItem-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.PostListItem-title {
  line-height: 1.5;
  font-size: 20px;
  font-weight: 700;
}

.PostListItem-summary {
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.7;
  color: #666;
  word-break: break-all;
}

.PostListItem-readall {
  padding-left: 4px;
  color: #b3b3b3;
}

.PostListItem-readall .icon {
 display: inline-block;
 vertical-align: middle;
 -webkit-transform: rotate(-90deg);
 transform: rotate(-90deg);
}

.PostListItem-footer {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 14px;
  line-height: 1.5;
  color: gray;
}

.PostListItem-footer a:hover {
 color: #333;
}

.PostListItem-date {
  display: inline;
}

.PostListItem-entrance {
  display: none;
}

/* 纵排变种，如置顶文章 */
.PostListItem--column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.PostListItem--column .PostListItem-titleImageWrapper {
 padding-right: 0;
 padding-bottom: 10px;
}
.PostListItem--column .PostListItem-titleImage {
 width: 100%;
 height: 220px;
}

/* 窄图变种，如推荐阅读 */
.PostListItem--narrow .PostListItem-titleImage {
 width: 156px;
 height: 143px;
}
.PostListItem--narrow .PostListItem-footer {
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
}

/* 卡片变种，如首页发现 */
.PostListItem--card {
  /* TODO */
}

@media (max-width: 660px) {
  .PostListItem {
    margin-left: 16px;
    margin-right: 16px;
  }

  .PostListItem--responsive {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .PostListItem--responsive .PostListItem-titleImageWrapper {
  padding-right: 0;
  padding-bottom: 10px;
 }

  .PostListItem--responsive .PostListItem-titleImage {
  width: 100%;
  height: 220px;
 }

  .PostListItem--narrow .PostListItem-titleImage {
  width: 88px;
  height: 88px;
 }

  .PostListItem--narrow .PostListItem-footer {
  margin-top: auto;
 }
}

@media (max-width: 420px) {
  .PostListItem--narrow .PostListItem-title {
  font-size: 16px;
 }
}

.appview .PostListItem-summary {
 display: block;
 padding-top: 4px;
 padding-bottom: 4px;
 line-height: 1.4;
 font-size: 15px;
}

.appview .PostListItem-readall {
 display: none;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Badge {
  display: inline-block;
  width: 14px;
  height: 14px;
}

.Badge-wrapper {
  margin-left: 6px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.GuideModal-openInAppButton {
  width: 100%;
  line-height: 48px;
  color: #fff;
  background-color: #0f88eb;
  border-radius: 3px;
}

.GuideModal-content--onlyOpen {
  padding: 0 19px 16px;
}

.GuideModal-links {
  margin-top: 16px;
  margin-bottom: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.GuideModal-links .Button {
 position: relative;
 width: 120px;
 font-size: 15px;
}

.GuideModal-links .Button:not(:last-child)::after {
 content: '';
 position: absolute;
 top: 50%;
 right: 0;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 display: block;
 width: 0;
 height: 15px;
 border-left: 1px solid #e7eaf1;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Layout-titleImage--normal {
  margin-top: 22px;
}

.Layout-titleImage--full {
  margin-top: 0;
}

.PostIndex-header {
  position: relative;
}

.Layout-titleImage--full .PostIndex-header {
 text-shadow: 0 0 10px rgba(0, 0, 0, .24);
}

.PostIndex-title {
  font-size: 32px;
  line-height: 1.3;
  font-weight: 700;
}

.Layout-titleImage--full .PostIndex-title {
 color: #fff;
 position: absolute;
 bottom: 80px;
 z-index: 1;
 width: 660px;
}

.PostIndex-author {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 14px;
  color: #808080;
}

.PostIndex-author .PostIndex-authorName,
  .PostIndex-author time {
 color: #808080;
}

.PostIndex-author .PostIndex-authorName:hover, .PostIndex-author time:hover {
 color: #333;
}

.PostIndex-author .Badge {
 position: relative;
 top: -1px;
}

.Layout-titleImage--full .PostIndex-author {
 color: #fff;
 position: absolute;
 bottom: 22px;
 width: 660px;
 z-index: 1;
}

.Layout-titleImage--full .PostIndex-author .PostIndex-authorName,
    .Layout-titleImage--full .PostIndex-author time {
 color: #fff;
}

.Layout-titleImage--full .PostIndex-author .PostIndex-authorName:hover, .Layout-titleImage--full .PostIndex-author time:hover {
 color: #fff;
}

.Layout-titleImage--normal .PostIndex-author {
 margin-top: 22px;
}

.PostIndex-authorName {
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.PostIndex-authorAvatar {
  margin-right: 12px;
}

.PostIndex-authorFollowButton {
  width: 88px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: auto;
  padding: 0;
}

.PostIndex-authorExtension {
  margin-left: auto;
}

.PostIndex-status {
  margin: 48px 0 -20px;
  padding: 16px;
  color: #8590a6;
  background: #e7eaf1;
  border-radius: 4px;
  line-height: 1.5;
}

.PostIndex-warning {
  position: relative;
  margin: 48px 0 -20px;
  padding: 16px;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .06);
          box-shadow: 0 2px 4px rgba(0, 0, 0, .06);
  border: solid 1px #ddd;
  border-radius: 4px;
  line-height: 1.5;
}

.PostIndex-warningTitle {
  font-weight: 700;
  margin-bottom: 8px;
}

.PostIndex-warningContent {
  color: #808080;
}

.PostIndex-warningHelp {
  color: #b3b3b3;
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -12px;
}

.PostIndex-footer {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  color: rgba(0, 0, 0, .54);
}

.PostIndex-topics {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  overflow: hidden;
}

.PostIndex-reviewers {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  font-size: 15px;
  color: #808080;
}

.PostIndex-reviewerLink {
  margin-right: 3px;
}

.PostIndex-showReviewerButton {
  height: auto;
  line-height: 1;
  color: #808080;
  font-size: 15px;
  padding: 0;
  cursor: default;
}

.PostIndex-showReviewerButton.is-clickable {
 cursor: pointer;
}

.PostIndex-vote {
  margin: 40px 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;

}

.PostIndex-voteButton {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 36px;
}

.PostIndex-voteButton .icon {
 margin-right: 4px;
}

.PostIndex-voteButton[disabled] {
 border-color: transparent;
 opacity: 1;
 padding: 0;
 color: #50c87e;
}

.PostIndex-voteButton[disabled]:hover {
 background: transparent;
}

.PostIndex-voteButton[disabled]:active {
 background: transparent;
 color: #50c87e;
}

.PostIndex-voters {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-top: 16px;
}

.PostIndex-voter {
  margin: 0 8px 8px 0;
}

.PostIndex-voter img {
 width: 26px;
 height: 26px;
}

.PostIndex-control {
  margin: 40px 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.PostIndex-control > * + * {
 margin-left: 15px;
}

.PostIndex-editPost {
  font-size: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 36px;
}

.PostIndex-editPost span {
 position: relative;
 top: 1px;
}

@media (max-width: 660px) {
  .PostIndex-control .PostShare .Menu-dropdown {
  margin-left: 0;
  left: 0;
 }
}

/* Post typo */
.PostIndex-content {
  margin: 30px 0;
  line-height: 1.7;
}

.PostIndex-contributes {
  margin-bottom: 32px;
}

.PostIndex-recommendZone {
  position: relative;
  padding-top: 32px;
  padding-bottom: 55px;
}

/* for recommendPost date hover-title */

.PostIndex-recommendZone::before {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 width: 100vw;
 margin-left: calc(330px - 50vw);
 background: #fbfbfb;
 z-index: -1;
}

.PostIndex-recommendZone .BlockTitle-title {
 background: #fbfbfb;
}

.PostIndex-recommends .PostIndex-recommendItem {
 position: relative;
 padding: 24px 0;
}

.PostIndex-allVoters {
  position: relative;
  width: 26px;
  height: 26px;
  color: #b3b3b3;
  background: rgba(0, 0, 0, .06);
  border-radius: 50%;
}

.PostIndex-allVoters .icon-ic_like_more {
 position: relative;
 top: 1px;
 vertical-align: middle;
}

.RichText code {
  font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace;
}

@media (max-width: 420px) {
  /* 是编辑推荐时显示推荐，否则显示专栏名 */
  .PostIndex-recommends .PostListItem-footer {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
 }
  .PostIndex-recommends .PostListItem--recommended .PostListItem-source {
  display: none;
 }
}

/*
 * 顺序控制：
 * 窄屏时让收录信息在评论区下
 */
@media (max-width: 660px) {
  .Layout-titleImage--normal {
    margin-top: 0;
  }

  .Contributes {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }

  .PostIndex-recommendZone {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }

  .PostIndex-header {
    margin: 0 16px 0 16px;
  }

  .PostIndex-header .TitleImage {
  margin-left: -16px;
  margin-right: -16px;
 }

  .PostIndex-content,
  .PostIndex-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .PostIndex-reviewers {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-bottom: 20px;
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }

  .PostIndex-reviewers {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }

  .PostIndex-topics {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }

  .PostIndex-control {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-bottom: 20px;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }

  .PostIndex-vote {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
    margin-top: 0;
  }

  .PostIndex-recommendZone::before {
    margin-left: 0;
  }
}

/*
 * 文章页 AppView
 * see T89197
 */
.appview .PostIndex-title {
 padding-top: 16px;
}
.appview .PostIndex-header {
 margin: 0;
}
.appview .PostIndex-content {
 margin-bottom: 0;
}
.appview .PostIndex-warning {
 margin: 30px 16px 0;
}
.appview .PostIndex-warningHelp {
 display: none;
}
.appview .PostIndex-footer {
 padding-bottom: 30px;
 margin-bottom: 5px;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-align: end;
 -ms-flex-align: end;
 align-items: flex-end;
 line-height: 1.5;
}
.appview .PostIndex-contributes,
  .appview .PostIndex-recommendZone {
 margin-top: 5px;
 margin-bottom: 5px;
}
.appview .PostIndex-recommendZone {
 padding-top: 0;
}
.appview .PostIndex-recommendZone .BlockTitle-title {
 background: none;
}
.appview .PostIndex-recommendItem {
 padding: 16px 0;
 border-bottom-width: 1px;
 border-bottom-style: solid;
}
.appview .PostIndex-recommendZone::before {
 display: none;
}
.appview .Promotion-content {
 margin-top: 0;
}

.PostIndex-mark {
  background-color: rgba(40, 66, 85, .05);
  margin: 16px auto 0;
  border-radius: 4px;
}

@media (max-width: 660px) {

 .PostIndex-mark {
  margin: 16px 12px 0 12px
 }
}

.PostIndex-markTitle {
  color: #1f1f1f;
  font-size: 15px;
  margin: 16px 0 0 16px;
  font-weight: 600;
}

@media (max-width: 660px) {

 .PostIndex-markTitle {
  margin: 12px 12px 8px 12px
 }
}

.PostIndex-markSummary {
  color: #262626;
  font-size: 14px;
  margin: 4px 16px 16px 16px;
  line-height: 24px;
}

.PostIndex-markSummary a {
 cursor: pointer;
 color: #175199;
 text-decoration: underline;
}

@media (max-width: 660px) {

 .PostIndex-markSummary {
  margin: 12px
 }
}

.Annotation-complaintHelp {
  top: 15px;
}

.PostIndex-sourceColumnWrap {
  display: block;
  -webkit-box-align: left;
      -ms-flex-align: left;
          align-items: left;
  font-size: 17px;
  color: #999999;
  margin-top: 18px;
  margin-bottom: -10px;
  font-weight: 600;
}

.appview--dark .PostIndex-sourceColumnWrap {
 color: #606476;
}

.appview--android .PostIndex-sourceColumnWrap {
 color: rgba(0, 0, 0, .4);
}

.appview--android.appview--dark .PostIndex-sourceColumnWrap {
 color: rgba(255, 255, 255, .4);
}

.PostIndex-sourceColumn {
  color: #8590A6;
}

.appview--dark .PostIndex-sourceColumn {
 color: #70809E;
}

.appview--android .PostIndex-sourceColumn {
 color: #8590A6;
}

.appview--android.appview--dark .PostIndex-sourceColumn {
 color: #749BA3;
}

.PostIndex-openAppBarContainer {
  padding: 0 16px 40px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

/* 取自旧专栏 styles/ui/_videobox.scss */

.RichText {
  display: block;
}

.RichText div {
 display: block;
}

.appview--dark .RichText .highlight {
 color: #808394;
}

.RichText .GifPlayer {
 display: inline-block;
}

.RichText .video-box,
  .RichText .link-box {
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 margin: 12px 0;
 padding: 0;
 width: 100%;
 border: solid 1px #e7eaf2;
 border-radius: 4px;
 overflow: hidden;
 cursor: pointer;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-box-shadow: 0 2px 4px rgba(0, 34, 77, .05);
 box-shadow: 0 2px 4px rgba(0, 34, 77, .05);
}

html.no-touch .RichText .video-box:hover, html.no-touch .RichText .link-box:hover {
 text-decoration: none;
}

.RichText .video-box .thumbnail, .RichText .link-box .thumbnail {
 height: 110px;
 width: 110px;
 margin: 0;
 -o-object-fit: cover;
 object-fit: cover;
 border-radius: 4px 0 0 4px;
}

.RichText .video-box .thumbnail--bookCover, .RichText .link-box .thumbnail--bookCover {
 height: 110px;
 width: 83px;
}

.RichText .video-box .content, .RichText .link-box .content {
 padding: 10px 16px;
 overflow: hidden;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-flex: 1;
 -ms-flex: 1;
 flex: 1;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 height: auto;
}

.RichText .video-box .title, .RichText .link-box .title {
 position: relative;
 display: block;
 max-width: 100%;
 max-height: 56px;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 font-size: 18px;
 line-height: 28px;
 font-weight: 700;
 color: #333;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
}

.RichText .video-box .title .z-ico-extern-blue,
      .RichText .video-box .title .z-ico-extern-gray,
      .RichText .link-box .title .z-ico-extern-blue,
      .RichText .link-box .title .z-ico-extern-gray {
 display: none;
}

.RichText .video-box .url, .RichText .link-box .url {
 margin-top: 8px;
 color: #a5a5a5;
 font-size: 13px;
 display: inline-block!important;
 max-width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.RichText .video-box .url .z-ico-video, .RichText .link-box .url .z-ico-video {
 display: none;
}

html.no-touch .RichText .video-box:hover:after {
 content: '\E922';
 font-family: 'icomoon' !important;
 font-size: 24px;
 line-height: 24px;
 color: #fff;
 position: absolute;
 left: 43px;
 top: 43px;
 text-shadow: 0 0 5px rgba(0, 0, 0, .2);
}

.RichText .video-link {
 padding-left: 28px;
 background-image: url(/images/video/video.png);
 background-repeat: no-repeat;
 background-position: 0 center;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

 .RichText .video-link {
  background-image: url(/images/video/video@2x.png)
 }
}

.RichText .link-box .label { /* T63872 web 端还没有需求 */
 display: none;
}

.RichText .share-link {
 padding-left: 28px;
 background: url(/static/images/link.svg) no-repeat 6px center;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.PostIndex-appViewAuthorFollowBtn,
.PostIndex-appViewAuthorUnfollowBtn {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  white-space: nowrap;
  text-align: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 30px;
  width: 70px;
  border-radius: 4px;
  border: 1px solid #0084FF;
  font-size: 13px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.PostIndex-appViewAuthorFollowBtn span, .PostIndex-appViewAuthorUnfollowBtn span {
 line-height: 0;
}

.PostIndex-appViewAuthorFollowBtn:focus,
  .PostIndex-appViewAuthorFollowBtn:hover,
  .PostIndex-appViewAuthorFollowBtn:active,
  .PostIndex-appViewAuthorUnfollowBtn:focus,
  .PostIndex-appViewAuthorUnfollowBtn:hover,
  .PostIndex-appViewAuthorUnfollowBtn:active {
 tap-highlight-color: rgba(0, 0, 0, 0);
 tap-highlight-color: transparent;
 outline: none;
}

.appview--android .PostIndex-appViewAuthorFollowBtn, .appview--android .PostIndex-appViewAuthorUnfollowBtn {
 font-size: 12px;
 width: 64px;
 height: 32px;
}

.PostIndex-appViewAuthorIcon {
  margin-right: 6px;
  margin-top: -1px;
  float: left;
}

.PostIndex-appViewAuthorFollowBtn {
  color: #0084FF;
  border-color: #0084FF;
}

.PostIndex-appViewAuthorFollowBtn svg {
 fill: #0084FF;
}

.PostIndex-appViewAuthorFollowBtn.active {
 color: rgba(255, 255, 255, .8);
 background-color: #0084FF;
}

.PostIndex-appViewAuthorFollowBtn.active svg {
 fill: rgba(255, 255, 255, .8);
}

.appview--dark .PostIndex-appViewAuthorFollowBtn {
 border-color: #3A76D0;
 background-color: transparent;
 color: #3A76D0;
}

.appview--dark .PostIndex-appViewAuthorFollowBtn svg {
 fill: #3A76D0;
}

.appview--dark .PostIndex-appViewAuthorFollowBtn.active {
 color: rgba(255, 255, 255, .8);
 background-color: #3A76D0;
 border-color: #3A76D0;
}

.appview--dark .PostIndex-appViewAuthorFollowBtn.active svg {
 fill: rgba(255, 255, 255, .8);
}

.appview--android .PostIndex-appViewAuthorFollowBtn {
 color: #0F88EB;
 background-color: transparent;
 border-color: #0F88EB;
}

.appview--android .PostIndex-appViewAuthorFollowBtn svg {
 fill: #0F88EB;
}

.appview--android .PostIndex-appViewAuthorFollowBtn.active {
 color: #fff;
 background-color: #0F88EB;
 border-color: #0F88EB;
}

.appview--android .PostIndex-appViewAuthorFollowBtn.active svg {
 fill: #fff;
}

.appview--android.appview--dark .PostIndex-appViewAuthorFollowBtn {
 color: #749BA3;
 background-color: transparent;
 border-color: #749BA3;
}

.appview--android.appview--dark .PostIndex-appViewAuthorFollowBtn svg {
 fill: #749BA3;
}

.appview--android.appview--dark .PostIndex-appViewAuthorFollowBtn.active {
 color: rgba(255, 255, 255, .7);
 background-color: #749BA3;
 border-color: #749BA3;
}

.appview--android.appview--dark .PostIndex-appViewAuthorFollowBtn.active svg {
 fill: rgba(255, 255, 255, .7);
}

.PostIndex-appViewAuthorUnfollowBtn {
  color: #848994;
  border-color: #EEEFF0;
  background-color: #EEEFF0;
}

.PostIndex-appViewAuthorUnfollowBtn:hover {
 background-color: #EEEFF0;
}

.PostIndex-appViewAuthorUnfollowBtn.active {
 color: rgba(255, 255, 255, .8);
 border-color: #AFB0B3;
 background-color: #AFB0B3;
}

.PostIndex-appViewAuthorUnfollowBtn.active svg {
 fill: rgba(255, 255, 255, .8);
}

.appview--dark .PostIndex-appViewAuthorUnfollowBtn {
 color: #848994;
 border-color: #383D42;
 background-color: #383D42;
}

.appview--dark .PostIndex-appViewAuthorUnfollowBtn.active {
 color: rgba(255, 255, 255, .8);
 border-color: #848994;
 background-color: #848994;
}

.appview--dark .PostIndex-appViewAuthorUnfollowBtn.active svg {
 fill: rgba(255, 255, 255, .8);
}

.appview--android .PostIndex-appViewAuthorUnfollowBtn {
 color: #89949C;
 border-color: #E0E0E0;
 background-color: #E0E0E0;
}

.appview--android .PostIndex-appViewAuthorUnfollowBtn.active {
 color: #87939C;
 border-color: #CACACA;
 background-color: #CACACA;
}

.appview--android.appview--dark .PostIndex-appViewAuthorUnfollowBtn {
 color: #749BA3;
 border-color: #3E5259;
 background-color: #3E5259;
}

.appview--android.appview--dark .PostIndex-appViewAuthorUnfollowBtn.active {
 color: #749BA3;
 border-color: #536269;
 background-color: #536269;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.PostIndex-appViewAuthor {
  height: 52px;
  border-bottom: 1px solid #e7e7e7;
}
.appview--dark .PostIndex-appViewAuthor {
 border-bottom-color: #262728;
}
.appview--android .PostIndex-appViewAuthor {
 height: 72px;
 border-bottom-color: #E6E6E6;
}
.appview--android.appview--dark .PostIndex-appViewAuthor {
 border-bottom-color: #2E3E45;
}
.PostIndex-appViewAuthorInner {
 -webkit-box-flex: 1;
 -ms-flex: 1;
 flex: 1;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 padding: 0 12px;
}
.appview--android .PostIndex-appViewAuthorInner {
 padding: 0 16px;
}
.PostIndex-appViewAuthorAvatar-hemingway {
 width: 34px;
 height: 34px;
 position: relative;
 border-radius: 50%;
 -webkit-box-flex: 0;
 -ms-flex: 0 0 auto;
 flex: 0 0 auto;
}
.appview--android .PostIndex-appViewAuthorAvatar-hemingway {
 width: 40px;
 height: 40px;
}
.PostIndex-appViewAuthorAvatar-hemingway:before {
 display: block;
 content: " ";
 width: 100%;
 height: 100%;
 overflow: hidden;
 z-index: 10;
 position: absolute;
 left: 0;
 top: 0;
 background-color: rgba(0, 0, 0, .05);
 border-radius: 50%;
}
.PostIndex-appViewAuthorAvatar-hemingway img {
 width: 100%;
 height: 100%;
}
.PostIndex-appViewAuthorMain {
 margin: 0 10px;
 -webkit-box-flex: 1;
 -ms-flex: 1;
 flex: 1;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
}
.appview--android .PostIndex-appViewAuthorMain {
 margin: 0 8px;
}
.PostIndex-appViewAuthorNameWrap {
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 height: 18px;
}
.PostIndex-appViewAuthorName {
 -webkit-box-flex: 0;
 -ms-flex: 0 0 auto;
 flex: 0 0 auto;
 font-size: 15px;
 color: #282828;
 font-weight: 500;
}
.appview--dark .PostIndex-appViewAuthorName {
 color: #70809E;
}
.appview--android .PostIndex-appViewAuthorName {
 font-size: 14px;
 font-weight: 600;
 color: #000;
}
.appview--android.appview--dark .PostIndex-appViewAuthorName {
 color: rgba(255, 255, 255, .87);
}
.PostIndex-appViewAuthorBadge {
 line-height: 0;
 margin-left: 4px;
}
.PostIndex-appViewAuthorBadge svg {
 float: left;
}
.PostIndex-appViewAuthorDesc {
 display: block;
 width: 200px;
 margin-top: 3px;
 font-size: 13px;
 line-height: 16px;
 height: 16px;
 overflow: hidden;
 text-overflow: ellipsis;
 color: #999999;
 white-space: nowrap;
}
.appview--dark .PostIndex-appViewAuthorDesc {
 color: #606476;
}
.appview--android .PostIndex-appViewAuthorDesc {
 margin-top: 6px;
 font-size: 12px;
 color: rgba(0, 0, 0, .54);
}
.appview--android.appview--dark .PostIndex-appViewAuthorDesc {
 color: rgba(255, 255, 255, .54);
}
.PostIndex-appViewAuthorDesc .RichText {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.PostIndex-appViewTitleImage {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.PostIndex-appViewTitleImageWrap{
 width: 100%;
 position: relative;
 overflow: hidden;
}
.PostIndex-appViewTitleImageWrap:before {
 display: block;
 content: ' ';
 width: 100%;
 height: 100%;
 overflow: hidden;
 position: absolute;
 z-index: 10;
 background-color: rgba(0, 0, 0, .05);
}
.appview--dark .PostIndex-appViewTitleImageWrap:before {
 background-color: rgba(0, 0, 0, .3);
}
.appview--android .PostIndex-appViewTitleImageWrap:before {
 background-color: rgba(0, 0, 0, .05);
}
.appview--android.appview--dark .PostIndex-appViewTitleImageWrap:before {
 background-color: rgba(0, 0, 0, .15);
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnSubmissionDialog {
  height: 160px;
}

.ColumnSubmissionDialog .Spinner {
 margin-top: 50px;
}

.ColumnSubmissionDialog .SimpleInput-wrapper {
 margin: 5px 0;
}

.ColumnSubmissionDialog-empty {
  margin-top: 50px;
  text-align: center;
}

.ColumnSubmissionPopover {
  visibility: visible;
  opacity: 1;
  padding: 0;
  z-index: 206;
  -webkit-transform: translateY(-8px);
          transform: translateY(-8px);
  -webkit-transition: all .1s;
  transition: all .1s;
}

.ColumnSubmissionPopover .Menu {
 width: 306px;
}

.ColumnSubmissionPopover .AutoComplete-group span {
 height: 40px;
 line-height: 40px;
 padding-left: 16px;
 color: #b3b3b3;
}

.ColumnSubmissionPopover .AutoComplete-group .Menu-item {
 padding: 0 16px;
}

.ColumnSubmissionDialog-selectedWrapper {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, .16);
  position: relative;
  margin: 6px 0;
}

.ColumnSubmissionDialog-selected {
  line-height: 36px;
  background: rgba(0, 0, 0, .06);
  padding: 0 42px 0 8px;
  border-radius: 4px;
}

.ColumnSubmissionDialog-removeSelected {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 20px;
  padding: 0 4px;
}

.ColumnSubmissionDialog-removeSelected .Icon {
 max-width: 12px;
 fill: #808080;
}

.ColumnSubmissionDialog-success {
  text-align: center;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.TopicTag {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  padding: 0 15px;
  border-radius: 15px;
  border: 1px solid rgba(0, 0, 0, .1);
  color: gray;
}

.TopicTag:active {
  background: rgba(0, 0, 0, .1);
}

.TopicTag.is-active {
  border-color: transparent;
  background: rgba(0, 0, 0, .06);
  cursor: default;
}

.TopicTag-count {
  margin-left: 3px;
  color: #b3b3b3;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnTopicList {
  margin-bottom: 48px;
  text-align: center;
}

.ColumnTopicList li {
 display: inline-block;
 margin: 8px;
}

.ColumnTopicList-showall {
  padding: 4px 10px;
  font-size: 14px;
  color: #808080;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.ColumnBanNotice {
  width: 100%;
  margin-bottom: 18px;
  padding: 16px;
  line-height: 1.5;
  border: 1px solid #d2d3d4;
  border-radius: 4px;
  font-size: 14px;
  text-align: left;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
          box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.ColumnBanNotice a {
 color: #259;
 text-decoration: none;
}
.ColumnBanNotice a:hover {
 text-decoration: underline;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnTransferModal {
  width: 816px;
  height: 488px;
  padding: 0;
}

.ColumnTransferModal .Modal-inner {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
 -webkit-box-align: stretch;
 -ms-flex-align: stretch;
 align-items: stretch;
 height: 100%;
}

.ColumnTransferModal .Modal-title {
 -webkit-box-flex: 0;
 -ms-flex: 0 0 50%;
 flex: 0 0 50%;
 height: auto;
 padding-top: 300px;
 text-align: center;
 background-image: url(https://z1.zhimg.com/images/f3e87672.migration_left_img.png);
 background-repeat: no-repeat;
 background-size: cover;
}

@media (-webkit-min-device-pixel-ratio: 2) {

 .ColumnTransferModal .Modal-title {
  background-image: url(https://z1.zhimg.com/images/eb2bbde7.migration_left_img@2x.png)
 }
}

.ColumnTransferModal .Modal-content {
 -webkit-box-flex: 0;
 -ms-flex: 0 0 50%;
 flex: 0 0 50%;
 padding: 32px;
}

.ColumnTransfer {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.ColumnTransfer-editor {
  margin-top: 36px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ColumnTransfer-help {
  margin-left: .5em;
}

.ColumnTransfer-help .Menu-dropdown {
 width: 370px;
 max-width: 100vw;
 left: -175px;
 top: 100%;
}

.ColumnTransfer-help .Menu-item {
 padding: 16px;
 line-height: 18px;
 text-indent: 0;
 color: #808080;
}

.ColumnTransfer-help .Menu-item:hover {
 background: white;
}

.ColumnTransfer-selected {
  margin-top: 16px;
  display: block;
}

.ColumnTransfer-selectedItem {
  display: inline-block;
  margin-bottom: 4px;
}

.ColumnTransfer-footer {
  margin-top: auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.FirstTimeModal {
  width: 408px;
  height: 488px;
  background-image: url(https://z1.zhimg.com/images/6707bdf6.welcome_bg.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (-webkit-min-device-pixel-ratio: 2) {

 .FirstTimeModal {
  background-image: url(https://z1.zhimg.com/images/5860fafa.welcome_bg@2x.png)
 }
}

.FirstTimeModal .Modal-title {
 margin: 221px 0 8px;
 font-size: 18px;
 text-align: center;
 font-weight: 700;
}

.FirstTimeModal .Modal-content {
 padding: 0;
}

.FirstTimeModal .Modal-inner {
 background: transparent;
}

.FirstTimeModal-content {
  padding: 0 32px;
  margin-bottom: 32px;
  line-height: 1.7;
  text-align: left;
  color: #333;
}

.FirstTimeModal-buttonGroup {
  margin-top: 32px;
  -ms-flex-item-align: center;
      align-self: center;
}

.FirstTimeModal-buttonGroup .Button + .Button {
 margin: 8px 0 0;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.InvitePanel-success {
  padding: 0 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.InvitePanel-successIcon {
  display: block;
  margin-top: 8px;
  margin-bottom: 12px;
  font-size: 36px;
  color: #50c87e;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnEnd {
  position: relative;
  display: block;
  margin: 30px auto 80px;
  text-align: center;
  color: rgba(0, 0, 0, .1);
}

.ColumnEnd::before {
 content: '';
 position: absolute;
 top: 50%;
 width: 340px;
 height: 1px;
 left: 50%;
 margin-left: -170px;
 background: currentColor;
}

.ColumnEnd-icon {
  position: relative;
  padding: 0 12px;
  background: white;
  z-index: 1;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnAbout {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

@media (max-width: 660px) {

 .ColumnAbout {
  padding-left: 16px;
  padding-right: 16px
 }
}

.ColumnAbout-avatar {
  width: 100px;
  height: 100px;
  margin-bottom: 22px;
  border-radius: 50%;
}

.ColumnAbout-name {
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 12px;
}

.ColumnAbout-intro {
  margin-bottom: 18px;
}

.ColumnAbout-actions {
  position: relative;
  margin-bottom: 18px;
}

.ColumnAbout-menu {
  position: absolute;
  right: -56px;
  top: 2px;
  padding: 0;
}

.ColumnAbout-menu .Menu-dropdown {
 top: 100%;
 left: -48px;
 margin-top: 8px;
 width: 128px;
}

.ColumnAbout-menuButton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #b3b3b3;
  -webkit-transition: -webkit-transform .2s ease-out .2s;
  transition: -webkit-transform .2s ease-out .2s;
  transition: transform .2s ease-out .2s;
  transition: transform .2s ease-out .2s, -webkit-transform .2s ease-out .2s;
}

.Menu--open .ColumnAbout-menuButton {
 -webkit-transform: rotate(180deg);
 transform: rotate(180deg);
}

/* hack for safari */

.ColumnAbout-menuButton:before {
 display: block;
 margin: 0 auto;
}

.ColumnAbout-followers {
  display: block;
  margin-bottom: 20px;
  font-size: 14px;
  color: gray;
}

.ColumnAbout-followers:hover {
  color: #333;
}

.ColumnBreadcrumb {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin-bottom: 48px;
  font-size: 14px;
}

.ColumnBreadcrumb .arrow {
 margin: 0 12px;
 width: 24px; /* 避免字体加载完时的抖动 */
 color: #808080;
 -webkit-transform: rotate(-90deg);
 transform: rotate(-90deg);
}

.ColumnBreadcrumb .Avatar-hemingway {
 margin-right: 12px;
}

.ColumnPins {
  margin-bottom: 42px;
}

.ColumnPostList li,
  .ColumnPostList .Spinner {
 margin-bottom: 56px;
}

.ColumnPostList--empty {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #808080;
  margin-bottom: 40px;
}

.ColumnPostList--empty p {
 margin-top: 29px;
 margin-bottom: 16px;
}

.ColumnPostList-emptyHolderIcon {
  font-size: 106px;
  color: #e5e5e5;
}

.ColumnPostList-emptyWrite {
  margin-top: 24px;
  border-color: #0080ff;
  color: #0080ff;
  border-radius: 4px;
  border: 1px solid #0f88eb;
  display: inline-block;
  padding: 0 16px;
  font-size: 14px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  background: none;
}

.ColumnPostList-emptyWrite:hover {
 background-color: rgba(13, 121, 209, .06);
}

@media (max-width: 660px) {
  .ColumnBreadcrumb {
    padding-left: 16px;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.Promotion-appViewAuthor {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 13px 16px;
  height: 60px;
  border-bottom: 1px solid #e7e7e7;
}
.appview--dark .Promotion-appViewAuthor {
 border-bottom-color: #262728;
}
.appview--android .Promotion-appViewAuthor {
 padding: 16px;
 height: 72px;
 border-bottom-color: #E6E6E6;
}
.appview--android.appview--dark .Promotion-appViewAuthor {
 border-bottom-color: #2E3E45;
}
.Promotion-appViewAuthorInner {
 -webkit-box-flex: 1;
 -ms-flex: 1;
 flex: 1;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
}
.Promotion-appViewAuthor .Avatar-hemingway {
 width: 34px;
 height: 34px;
}
.appview--android .Promotion-appViewAuthor .Avatar-hemingway {
 width: 40px;
 height: 40px;
}
.Promotion-appViewAuthorName {
 margin: 0 10px;
 -webkit-box-flex: 0;
 -ms-flex: 0 0 auto;
 flex: 0 0 auto;
 font-size: 15px;
 color: #282828;
 font-weight: 500;
}
.appview--dark .Promotion-appViewAuthorName {
 color: #70809E;
}
.appview--android .Promotion-appViewAuthorName {
 margin: 0 8px;
 font-size: 14px;
 font-weight: 600;
 color: #000;
}
.appview--android.appview--dark .Promotion-appViewAuthorName {
 color: rgba(255, 255, 255, .87);
}
.Promotion-appViewAuthorType {
 -ms-flex-pack: distribute;
 justify-content: space-around;
 font-size: 12px;
 color: #9197A3;
}
.appview--ios.appview--dark .Promotion-appViewAuthorType {
 color: #3F4455;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.FakeProgress {
  width: 210px;
  height: 4px;
  background: rgba(0, 0, 0, .1);
  position: relative;
  border-radius: 2px;
}

.FakeProgress-inner {
  -webkit-transition: width ease-in .2s;
  transition: width ease-in .2s;
  background: #fff;
  width: 0%;
  height: 4px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.WriteCover-wrapper {
  background: #f7f8f9;
  line-height: 192px;
  color: #808080;
  min-height: 192px;
  text-align: center;
}

.WriteCover-previewWrapper {
  height: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}

.Layout-titleImage--full .WriteCover-previewWrapper {
 position: static;
}

.Layout-titleImage--normal .WriteCover-previewWrapper .TitleImage {
 margin-bottom: 0;
}

.WriteCover-previewWrapper--empty:after {
 content: '\6DFB\52A0\9898\56FE';
 color: #b3b3b3;
 position: absolute;
 width: 100%;
 text-align: center;
 left: 0;
 bottom: 52px;
 line-height: 1;
 opacity: 0;
 z-index: 0;
 -webkit-transform: translateY(-12px);
 transform: translateY(-12px);
 -webkit-transition: all .2s;
 transition: all .2s;
}

.WriteCover-previewWrapper--empty:hover:after {
 opacity: 1;
 -webkit-transform: translateY(0);
 transform: translateY(0);
}

.WriteCover-uploadIcon {
  font-size: 42px;
  color: rgba(0, 0, 0, .2);
}

.WriteCover-uploadInput {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.WriteCover-progress {
  -ms-flex-item-align: center;
      align-self: center;
}

.WriteCover-editWrapper {
  position: absolute;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  height: 42px;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .75);
  border-radius: 4px 0 0 0;
  border: 0;
}

.WriteCover-editWrapper .Button {
 color: #fff;
}

.WriteCover-editWrapper .Button:nth-child(1):active{
 border-radius: 4px 0 0 0;
}

.WriteCover-editWrapper .Button:active {
 background: #000;
 opacity: .5;
}

.WriteCover-editButton {
  width: 48px;
  border: 0;
  border-radius: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  overflow: hidden;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.WriteIndex-titleInput {
  margin: 16px 0;
  border: 0;
  padding: 0;
  height: auto;
  width: 100%;
  position: relative;
}
.WriteIndex-titleInput.is-focus {
 border: 0;
}
.WriteIndex-titleInput .Input {
 height: 44px;
 min-height: 44px;
 display: block;
 width: 100%;
 border: 0;
 font-size: 32px;
 line-height: 1.4;
 font-weight: 700;
 outline: none;
 -webkit-box-shadow: none;
 box-shadow: none;
}
.WriteIndex-titleInput .Input::-webkit-input-placeholder {
 color: #b3b3b3;
}
.WriteIndex-titleInput .Input:-ms-input-placeholder {
 color: #b3b3b3;
}
.WriteIndex-titleInput .Input::placeholder {
 color: #b3b3b3;
}
.WriteIndex-titleInput .Input:focus {
 outline: none;
}
.Layout-titleImage--full .WriteIndex-titleInput {
 position: absolute;
 margin: 0;
 width: 660px;
 top: calc(100vh - 44px);
 -webkit-transform: translateY(-100%);
 transform: translateY(-100%);
 background: transparent;
 text-shadow: 0 0 10px rgba(0, 0, 0, .18);
}
.Layout-titleImage--full .WriteIndex-titleInput .Input {
 color: #fff;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.PostEditor, .PostEditor.is-focus {
 border: 0;
 border-top: 1px solid rgba(0, 0, 0, .08);
}
.PostEditor .Editable-toolbar {
 border: 0;
 background: transparent;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
 padding: 0;
}
.PostEditor .Icon {
 fill: #aaa;
}
.PostEditor .Editable-controls + .Editable-controls {
 padding-left: 8px;
 margin-left: 8px;
 border-left: 0;
 position: relative;
}
.PostEditor .Editable-controls + .Editable-controls:before {
 content: '';
 position: absolute;
 height: 26px;
 width: 1px;
 background: #f8f9fa;
 left: 0;
 top: 5px;
}
.PostEditor .Editable-control {
 width: 36px;
 height: 36px;
 margin-right: 0;
}
.PostEditor .Editable-control:not(:disabled):hover {
 background-color: #f6f7f8;
 border: 0;
 border-radius: 0;
}
.PostEditor .RichText {
 margin: 30px 0;
 padding: 0 0 200px;
 min-width: 660px;
}
.PostEditor .DraftEditor-root {
 padding: 0;
 font-size: 16px;
 min-height: 300px;
}
.PostEditor .DraftEditor-root blockquote + blockquote {
 margin-top: -20px;
}
.PostEditor .VideoCard-layout {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnSearchMenu .Menu-dropdown {
 min-height: 214px;
 overflow: hidden;
 margin-top: 45px;
 width: 208px;
 left: 50%;
 margin-left: -104px;
}

.ColumnSearchMenu .MenuButton-listen-click {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 margin: 0 auto;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
}

.ColumnSearchMenu-searchInput {
  width: 100%;
  height: 52px;
  border: none;
}

.ColumnSearchMenu-searchInput svg {
 position: absolute;
 top: 18px;
 left: 20px;
}

.ColumnSearchMenu-searchInput .Input {
 margin-left: 37px;
 color: #333;
}

.ColumnSearchMenu-searchInput.is-focus {
  border: none;
}

.ColumnSearchMenu-selectFriendsButton {
  padding: 0!important;
}

.ColumnSearchMenu-friends {
  border-radius: 0;
  cursor: pointer;
  padding: 5px 16px;
  line-height: 44px;
  white-space: nowrap;
  border: 0;
  color: #333;
  text-overflow: ellipsis;
  display: inline-block;
  width: 100%;
}

.ColumnSearchMenu-friends span {
 font-size: 15px;
}

.ColumnSearchMenu-image {
  width: 36px;
  height: 36px;
  margin-right: 14px;
  border-radius: 50%;
  vertical-align: middle;
  max-width: 100%;
  border: 0;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ReviewPanel-triggerButton {
  margin-right: 10px;
}

.ReviewPanel-triggerButton .icon {
 position: relative;
 top: 2px;
 margin-right: 2px;
}

.ReviewPanel-triggerButton:hover {
 color: #333;
}

.ReviewPanel-prpover {
  top: 58px;
  right: 128px;
}

.ReviewPanel-wrapper {
  width: 320px;
  min-height: 277px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
          box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
  border-radius: 4px;
  padding: 16px;
  font-size: 14px;
  color: #808080;
  line-height: 1.7;
}

.ReviewPanel-review {
  font-size: 14px;
  color: gray;
  line-height: 1.7;
  padding: 60px 0 30px;
  text-align: center;
}

.ReviewPanel-review .Icon {
 margin: 0 auto 16px;
}

.ReviewPanel-section .Menu {
  border: 0;
  -webkit-box-shadow: 0;
          box-shadow: 0;
  width: auto;
  height: auto;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.ReviewPanel-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
}

.ReviewPanel-selectButton {
  -ms-flex-item-align: center;
      align-self: center;
}

.ReviewPanel-selectButton .icon {
 font-size: 36px;
 color: #b3b3b3;
}

.ReviewPanel-selectButton:hover .icon {
 color: #808080;
}

/*padding-bottom: 20px;*/

.ReviewPanel-section + .ReviewPanel-section {
 border-top: 1px solid rgba(0, 0, 0, .06);
}

.ReviewPanel-sectionTitle {
  text-align: center;
  margin-top: 20px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.ReviewPanel-selectColumnMenu {
  -ms-flex-item-align: center;
      align-self: center;
}

.ReviewPanel-selectColumnMenu .Menu-dropdown {
 width: 200px;
 -webkit-transform: translate(-82px, 40px);
 transform: translate(-82px, 40px);
}

.ReviewPanel-selectColumnMenu .Menu-item .Button {
 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap;
 display: inline-block;
 height: 54px;
}

.ReviewPanel-selectedColumn {
  -ms-flex-item-align: center;
      align-self: center;
  position: relative;
  cursor: pointer;
  margin: 10px auto 16px;
}

.ReviewPanel-selectedColumn .Button {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 0;
 width: 100%;
 background: rgba(0, 0, 0, .6);
 border-radius: 50%;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 display: none;
}

.ReviewPanel-selectedColumn i {
 color: #fff;
}

.ReviewPanel-selectedColumn:hover .Button {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
}

.ReviewPanel-selectFriends {
  cursor: pointer;
}

.ReviewPanel-selectFriends-transform i {
 -webkit-transform: rotate(180deg);
 transform: rotate(180deg);
}

.ReviewPanel-button {
  margin-top: 16px;
}

.ReviewPanel-button .Button {
 margin-left: 215px;
 width: 72px;
 height: 32px;
 border-color: #0080ff;
 color: #0080ff;
}

.ReviewPanel-button .Button[disabled] {
 color: #b3b3b3;
 opacity: 1;
 background-color: transparent;
 border-color: rgba(0, 0, 0, .1);
}

.ReviewPanel-friend {
  height: 36px;
  margin-right: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ReviewPanel-friend .Avatar-hemingway {
 margin: 2px 8px 0 8px;
}

.ReviewPanel-selectFriend {
  position: relative;
}

.ReviewPanel-selectFriend .Button {
 position: absolute;
 top: 0;
 margin-left: 8px;
 margin-top: 2px;
 padding: 0;
 width: 36px;
 height: 36px;
 background: rgba(0, 0, 0, .6);
 border-radius: 50%;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 display: none;
}

.ReviewPanel-selectFriend i {
 color: #fff;
}

.ReviewPanel-selectFriend:hover .Button {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
}

.ReviewPanel-columnName {
  vertical-align: middle;
  margin-right: 14px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.PublishPanel-triggerButton {
  width: 82px;
  height: 32px;
  line-height: 30px;
  padding: 0;
}

.PublishPanel-triggerButton .icon {
 margin-right: -3px;
 vertical-align: -5px;
 pointer-events: none;
}

.PublishPanel-wrapper {
	position: relative;
	float: right;
	padding: 0 10px;
}

.PublishPanel-prpover {
  line-height: 1;
  cursor: default;
  width: 320px;
  min-height: 266px!important;
  height: auto;
  padding-bottom: 64px;
  margin-right: -12px;
  -webkit-animation: dropdown .2s;
          animation: dropdown .2s;
  opacity: 1;
  margin-top: -4px;
  z-index: 40;
  outline: 0;
}

.publish-title {
	font-size: 18px;
  padding: 16px;
  font-weight: 700;
}

.publish-content {
  max-height: 270px;
  overflow: auto;
  padding: 0 16px;
  font-size: 14px;
  color: gray;
  line-height: 1.7;
}

.publish-tags {
	margin-top: 16px;
}

.publish-tags::before {
 display: table;
 content: "";
}

.publish-tags::after {
 clear: both;
 display: table;
 content: "";
}

.publish-tags li {
 position: relative;
 float: left;
 list-style: none;
 margin: 0 15px 10px 0;
}

.publish-tagsWrapper {
  cursor: pointer;
  position: relative;
  display: inline-block;
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.publish-taglink {
	color: gray;
  border-radius: 15px;
  font-size: 14px;
  line-height: 20px;
  padding: 5px 36px 5px 16px;
  display: inline-block;
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #eee;
}

.publish-removeTag {
	cursor: pointer;
  position: absolute;
  width: 18px;
  height: 18px;
  right: 14px;
  top: 50%;
  margin-top: -8px;
  text-align: center;
  line-height: 11px;
}

.publish-searchInput {
	margin-top: 16px;
	width: 100%;
	border: none!important;
}

.publish-searchInput .Icon--search {
 position: absolute;
 top: 8px;
 left: 2px;
}

.publish-searchInput .Input {
 margin-left: 19px;
}

.publish-line {
  width: 100%;
  background: rgba(0, 0, 0, .16);
  height: 1px;
  margin-top: 2px;
}

.publish-suggest {
	position: absolute;
	top: 150px;
  z-index: 30;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 4px;
  -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
          box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
  background-color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.publish-suggest .publish-row {
 cursor: pointer;
 padding: 0 16px;
 line-height: 44px;
 white-space: nowrap;
 border: 0;
 color: #333;
}

.publish-suggest .publish-row::first-child {
 border-radius: 4px 4px 0 0;
}

.publish-suggest .publish-row::last-child {
 border-radius: 4px 4px 0 0;
}

.publish-normalRow:hover {
 background-color: #f7f8f9;
}

.publish-name {
	font-size: 15px;
}

.publish-empty {
	color: #b3b3b3;
}

.publish-stepOneButton {
  position: absolute;
  bottom: 16px;
  right: 16px;
}

.publish-buttonWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
	position: absolute;
  bottom: 16px;
}

.publish-button {
	width: 72px;
	height: 32px;
	line-height: 30px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	font-size: 12px;
}

.publish-Item {
  line-height: 18px;
  height: 45px;
  margin-bottom: 20px;
  position: relative;
  color: #333;
}

.publish-columnItem {
  line-height: 45px;
  position: relative;
  color: #333;
}

.publish-columnLabel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.publish-columnLabel span {
 display: block;
}

.publish-columnInput {
  position: absolute;
  top: 10px;
  right: 0;
}

.publish-description {
  font-size: 13px;
  color: #b3b3b3;
  display: block;
}

.publish-columnImg {
  height: 36px;
  margin-right: 14px;
  vertical-align: middle;
  border: none;
  border-radius: 50%;
}

.publish-returnButton {
  height: 32px;
  width: 72px;
  font-size: 14px;
  border-color: transparent;
  color: gray;
}

.publish-returnButton:hover {
 color: #333;
}

.publish-stepTwoButton {
  margin-left: 160px;
  font-size: 12px;
}

.publish-searchEmptyInput {
  display: none;
}

.publish-lable {
  margin-bottom: 20px;
}:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.WriteIndex-pageTitleWrapper {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.WriteIndex-pageTitle {
  font-weight: 700;
  color: #333;
  margin-right: 20px;
}

.WriteIndex-pageSubTitle {
  color: #b3b3b3;
}

.WriteIndex-pageTitleError {
  color: #f57373;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes loading {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.WriteIndex-pageTitleLoading {
  -webkit-animation: loading .9s infinite;
          animation: loading .9s infinite;
}

.Editable-videoModal-typeButton:active {
 outline: none;
}

.Editable .is-fixed {
 top: 58px!important;
 background-color: rgba(255, 255, 255, .97);
 width: 100%;
}

.Editable-styled {
  font-weight: normal!important;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.HelpMenu-help {
  display: inline-block;
  background: #fff;
  width: 18px;
  height: 18px;
  z-index: 1;
  position: relative;
  text-align: center;
  line-height: 18px;
  color: gray;
}

.HelpMenu-icon {
  display: inline-block;
  cursor: pointer;
  background: #fff;
  margin-left: -24px;
}

.HelpMenu-menu {
  width: 370px;
  margin-left: -198px;
  min-height: auto!important;
  padding: 16px;
  right: auto;
  left: 50%;
  margin-top: 14px;
  font-size: 14px;
  color: gray;
  font-weight: 400;
  cursor: default;
  top: 100%;
  z-index: 40;
  outline: 0;
  position: absolute;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 4px;
  -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
          box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
  background-color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.HelpMenu-menu:before,
  .HelpMenu-menu:after {
 content: "";
 position: absolute;
 left: 50%;
 width: 0;
 height: 0;
 margin: 0 0 0 -8px;
 font-size: 0;
 border-left: 9px solid transparent;
 border-right: 9px solid transparent;
}

.HelpMenu-menu:before {
 top: -10px;
 border-bottom: 9px solid rgba(0, 0, 0, .08);
}

.HelpMenu-menu:after {
 top: -9px;
 border-bottom: 9px solid #FFF;
}

.HelpMenu-menuItem {
  padding: 0;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.RequestIndex-wrapper {
  position: relative;
  z-index: 0;
  background: #fbfcfc url('https://z1.zhimg.com/images/83364567.bg@2x.png') repeat-x;
  background-size: 20px 450px;
  padding-bottom: 70px;
}

.RequestIndex-wrapper::before {
 content: "";
 background: url('https://z1.zhimg.com/images/6a263d8b.patterns.svg') center -15px no-repeat;
 width: 100%;
 height: 100%;
 z-index: -1;
 position: absolute;
 top: 0;
 left: 0;
}

.RequestIndex-content {
  padding: 32px;
  width: 620px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #fff;
  border-radius: 4px;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
          box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
  background: rgba(255, 255, 255, .96);
}

@media screen and (max-width: 660px) {

 .RequestIndex-content {
  width: auto
 }
}


.RequestIndex-explain {
  line-height: 1.7;
  font-size: 14px;
}


.RequestIndex-explain h2 {
 font-size: 18px;
 margin: 0;
 font-weight: 700;
}


.RequestIndex-explain p {
 margin-top: 32px;
}


.RequestIndex-explain p .nm {
 margin: 0;
}


.RequestIndex-explain h5 {
 margin: 0;
 margin-top: 32px;
 font-size: 14px;
}


.RequestIndex-explain ul li {
 margin-left: 2em;
 list-style-type: disc;
}


.RequestIndex-form {
  border-top: 1px dotted rgba(0, 0, 0, .1);
  margin-top: 32px;
  padding-top: 32px;

}


.RequestIndex-form .error-tips {
 color: #e26d6d;
}


.RequestIndex-form-title {
 font-weight: 700;
 line-height: 29px;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
}


.RequestIndex-form-title .HelpMenu-icon {
 margin-left: 2px;
 vertical-align: -8px;
}


.RequestIndex-form-title .HelpMenu-menu {
 width: 380px;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 margin: 20px 0 0 0;
}


@media screen and (max-width: 660px) {

 .RequestIndex-form-title .HelpMenu-menu {
  width: 200px
 }
}


.RequestIndex-form > div {
 padding-bottom: 24px;
 position: relative;
}


.RequestIndex-form .ColumnTransfer-help {
 position: absolute;
 left: 60px;
 top: -3px;
}


.RequestIndex-form .RequestIndex-input {
 border: 0;
 width: 100%;
 padding: 0;
 height: 43px;
}


.RequestIndex-form .RequestIndex-input .Input{
 border: 0;
 height: 43px;
 -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .16);
 box-shadow: 0 1px 0 rgba(0, 0, 0, .16);
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 font-size: 14px;
 line-height: 20px;
 padding: 10px 0;
 outline: 0;
 width: 100%;
 border-radius: 0;
 -webkit-transition: -webkit-box-shadow ease-in-out .15s;
 transition: -webkit-box-shadow ease-in-out .15s;
 transition: box-shadow ease-in-out .15s;
 transition: box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 resize: none;
}


.RequestIndex-form .RequestIndex-input .Input:focus {
 border: 0;
 -webkit-box-shadow: 0 2px 0 #0080ff;
 box-shadow: 0 2px 0 #0080ff;
}


.RequestIndex-form .RequestIndex-input .Input::-webkit-input-placeholder {
 color: #b3b3b3;
}


.RequestIndex-form .RequestIndex-input .Input:-ms-input-placeholder {
 color: #b3b3b3;
}


.RequestIndex-form .RequestIndex-input .Input::placeholder {
 color: #b3b3b3;
}


.RequestIndex-form .RequestIndex-columnTopicInput {
 width: 100%;
 border: none;
}


.RequestIndex-form .RequestIndex-columnTopicInput svg {
 position: absolute;
 top: 12px;
 left: 0;
}


.RequestIndex-form .RequestIndex-columnTopicInput .Input {
 padding-left: 30px;
}


.RequestIndex-form .RequestIndex-columnTopicContainer,
  .RequestIndex-form .RequestIndex-columnBackgroundContainer {
 margin-top: 36px;
}


.RequestIndex-form .RequestIndex-column-inputTips {
 position: absolute;
 font-size: 14px;
 bottom: 0;
 color: gray;
 padding-top: 10px;
 left: 0;
 width: 100%;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
 opacity: 0;
 -webkit-transition: all .2s ease-in;
 transition: all .2s ease-in;
}


.RequestIndex-form .RequestIndex-column-inputTips.show{
 opacity: 1;
}


.RequestIndex-form .RequestIndex-column-inputTips .left {
 display: block;
 text-align: left;
}


.RequestIndex-form .RequestIndex-column-inputTips .right {
 display: block;
 text-align: right;
 -webkit-box-flex: 1;
 -ms-flex: 1;
 flex: 1;
}


.RequestIndex-form .RequestIndex-formSubmit {
 padding-top: 44px;
 line-height: 34px;
 margin-bottom: -24px;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
}


.RequestIndex-form .RequestIndex-formSubmit span {
 color: #333;
 font-size: 14px;
 -webkit-box-flex: 1;
 -ms-flex: 1;
 flex: 1;
}

.topic-suggest {
  position: absolute;
  top: 74px;
  z-index: 30;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 4px;
  -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
          box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
  background-color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

.topic-suggest.topic-suggestTop130 {
 top: 130px;
}

.topic-suggest .topic-suggestItem {
 cursor: pointer;
 padding: 0 16px;
 line-height: 44px;
 white-space: nowrap;
 border: 0;
 color: #333;
}

.topic-suggest .topic-suggestItem:hover {
 background-color: #f7f8f9;
}

.topic-suggest .topic-suggestItem.topic-suggestEmpty{
 color: #b3b3b3;
}

.topic-suggest .topic-suggestItem.topic-suggestEmpty:hover {
 background-color: #fff;
}

.topic-list {
  margin-top: 16px;
}

.topic-list::before,
  .topic-list::after {
 display: table;
 content: "";
}

.topic-list::after {
 clear: both;
}

.topic-list li {
 position: relative;
 float: left;
 list-style: none;
 margin: 0 15px 10px 0;
}

.topic-list.topic-listLine{
 width: 100%;
 padding-bottom: 2px;
 border-bottom: 1px solid rgba(0, 0, 0, .16);
}

.topic-list .topic-listItem {
 cursor: pointer;
 position: relative;
 display: inline-block;
 max-width: 100%;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

.topic-list .topic-listItemLink {
 color: gray;
 border-radius: 15px;
 font-size: 14px;
 line-height: 20px;
 padding: 5px 36px 5px 16px;
 display: inline-block;
 max-width: 100%;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 background: #eee;
}

.topic-list .topic-listItemRemove {
 cursor: pointer;
 position: absolute;
 width: 18px;
 height: 18px;
 right: 14px;
 top: 50%;
 margin-top: -8px;
 text-align: center;
 line-height: 11px;
}

.RequestIndex-message {
  text-align: center;
  padding: 120px 0;
  line-height: 1.6;
}


@media screen and (max-width: 660px) {
  .ColumnTransfer-help .Menu-dropdown{
    left: -75px;
    width: 340px;
  }
}

:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
@media screen and (max-width: 660px) {
 .Users-List .Users-bio {
  display: none;
 }
}
.Users-List li {
 position: relative;
 padding-left: 64px;
 min-height: 48px;
 margin-bottom: 40px;
}
.Users-List li .Users-Avatar {
 position: absolute;
 top: 0;
 left: 0;
}
.Users-List li .Users-Intro {
 line-height: 28px;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
 font-size: 16px;
 color: gray;
}
.Users-List li .Users-Intro a {
 color: #333;
 margin-right: 5px;
 font-weight: 700;
}
.Users-List li .Users-postsCount {
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
 color: gray;
 margin-top: 3px;
 font-size: 14px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Navbar-titleContent {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  color: #333;
  width: 100%;
  overflow: hidden;

}

.Navbar-titleContent img {
 margin-right: 12px;
 border-radius: 50%;
 vertical-align: middle;
}

.Navbar-titleContent .Navbar-titleName{
 font-weight: 700;
 max-width: calc(100% - 56px);
 display: block;
 line-height: 40px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

@media screen and (max-width: 660px) {

 .Navbar-titleContent .Navbar-titleName{
  max-width: 100%
 }
}

.Navbar-titleContent .ColumnFollowButton{
 margin-left: 32px;
}

@media screen and (max-width: 660px) {

 .Navbar-titleContent .Navbar-titleAvatar,
    .Navbar-titleContent .ColumnFollowButton {
  display: none;
 }
}

@media screen and (max-width: 660px) {

 .AboutIndex-Wrapper {
  padding-left: 16px;
  padding-right: 16px
 }
}

.AboutIndex-Wrapper h2 {
 font-size: 18px;
 font-weight: 700;
 margin: 0 0 32px;
}

.AboutIndex-Wrapper .block-title::after {
 content: '';
 position: absolute;
 height: 1px;
 left: 0;
 right: 0;
 top: 11px;
 background: #f0f0f0;
}

.AboutIndex-Wrapper .avatar {
 border-radius: 50%;
}

.AboutIndex-Wrapper .AboutIndex-introContent {
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
}

.AboutIndex-Wrapper .AboutIndex-introContent .AboutIndex-introInfo {
 margin-left: 16px;
 font-size: 15px;
}

.AboutIndex-Wrapper .AboutIndex-introContent .AboutIndex-introInfo h4 {
 font-size: 20px;
 font-weight: 700;
 line-height: 22px;
 margin: 16px 0;
}

.AboutIndex-Wrapper .AboutIndex-topicWrapper,
  .AboutIndex-Wrapper .AboutIndex-descriptionWrapper,
  .AboutIndex-Wrapper .AboutIndex-AuthorsWrapper {
 margin-top: 48px;
}

.AboutIndex-Wrapper .block-title {
 line-height: 22px;
 font-weight: 700;
 margin: 0 0 32px;
 font-size: 16px;
 position: relative;
}

.AboutIndex-Wrapper .block-title span {
 background: #fff;
 position: relative;
 z-index: 1;
 padding-right: 16px;
}

.AboutIndex-Wrapper .block-title .HelpMenu-icon {
 margin-left: 2px;
 vertical-align: -2px;
}

.AboutIndex-Wrapper .block-title .HelpMenu-menu {
 width: 200px;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 margin-left: 0;
}

.AboutIndex-Wrapper .AboutIndex-topicWrapper .AboutIndex-topicList {
 display: block;
}

.AboutIndex-Wrapper .AboutIndex-topicWrapper .AboutIndex-topicList span {
 margin: 0 16px 16px 0;
 display: inline-block;
 color: gray;
 border-radius: 15px;
 font-size: 14px;
 line-height: 20px;
 padding: 5px 16px;
 max-width: 100%;
 background: #eee;
}

.AboutIndex-Wrapper .AboutIndex-descriptionWrapper p {
 font-size: 15px;
 line-height: 24px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ListItem {
  width: 270px;
  margin-right: 60px;
  float: left;
  list-style: none;
  height: 48px;
  margin-bottom: 40px;
  position: relative;
}

.ListItem-img {
  float: left;
}

.ListItem-img img {
 width: 48px;
 height: 48px;
}

.ListItem-intro {
  margin-left: 64px;
}

.ListItem-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  display: inline-block;
  line-height: 22px;
}

.ListItem-name:hover {
 text-decoration: underline;
}

.ListItem-bio {
  display: block;
  color: gray;
  font-size: 14px;
  padding-right: 10px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.VotersIndex-pageTitle {
  font-size: 17px;
  padding-bottom: 16px;
  font-weight: 400;
  margin-bottom: 16px;
}

.VotersIndex-empty {
  text-align: center;
  color: gray;
  padding: 110px 0;
  margin: 47px 0 0;
}

@media (max-width: 420px) {
  .VotersIndex-pageTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
    padding-left: 16px;
    padding-right: 16px;
  }

  .VotersIndex-list {
    padding-left: 16px;
    padding-right: 16px;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.FollowersIndex-pageTitle {
  font-size: 17px;
  padding-bottom: 16px;
  font-weight: 400;
  margin-bottom: 16px;
}

.FollowersIndex-empty {
  text-align: center;
  color: gray;
  padding: 110px 0;
  margin: 47px 0 0;
}

.FollowersIndex-list {
  padding-bottom: 40px;
}

@media (max-width: 420px) {
  .FollowersIndex-pageTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
    padding-left: 16px;
    padding-right: 16px;
  }

  .FollowersIndex-list {
    padding-left: 16px;
    padding-right: 16px;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Drafts-item {
  padding: 20px 0;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.Drafts-title {
  font-size: 16px;
  padding: 0 0 8px;
  font-weight: 400;
  line-height: 1.5;
  word-break: break-all;
  max-height: 60px;
  color: #333;
  text-decoration: none;
  margin: 0;
  overflow: hidden;
}

.Drafts-link {
  color: #333;
  text-decoration: none;
}

.Drafts-meta {
  color: gray;
  text-decoration: none;
  font-size: 14px;
  display: inline;
}

.Drafts-updated {
  position: relative;
  cursor: pointer;
  color: gray;
}

.Drafts-updated:hover {
 color: #333;
}

.Drafts-updated:hover:before {
 content: "";
 position: absolute;
 left: 50%;
 width: 0;
 height: 0;
 margin: 0 0 0 -6px;
 font-size: 0;
 border-bottom: 6px solid rgba(0, 0, 0, .8);
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 -webkit-transition: all .05s ease-in-out;
 transition: all .05s ease-in-out;
 opacity: 0;
 bottom: auto;
 top: 22px;
 visibility: visible;
 opacity: 1;
 z-index: 50;
}

.Drafts-updated:hover:after {
 content: attr(data-title);
 white-space: normal;
 bottom: auto;
 top: 28px;
 padding: 10px 16px;
 color: #fff;
 line-height: 1.5;
 text-align: center;
 position: absolute;
 left: 50%;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 font-size: 13px;
 display: inline-block;
 background-color: rgba(0, 0, 0, .8);
 border-radius: 4px;
 pointer-events: none;
 visibility: visible;
 opacity: 1;
 z-index: 50;
 line-height: 1.8;
 width: 290px;
 margin-left: -145px;
 -webkit-transition: all .05s ease-in-out;
 transition: all .05s ease-in-out;
}

.Drafts-removeButton {
  cursor: pointer;
}

.Drafts-removeButton:hover {
 color: #333;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Drafts-modalTitle {
  padding: 0 38px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #8590a6;
  text-align: center;
}

.Drafts-list {
  margin-bottom: 80px;
}

.Drafts-list .Spinner {
 margin-bottom: 56px;
}

@media (max-width: 420px) {
  .Drafts-list {
    margin: 0 16px;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.Mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  -webkit-transition: opacity 200ms ease-in;
  transition: opacity 200ms ease-in;
}

.Mask-hidden {
  pointer-events: none;
  opacity: 0;
}

.Mask-mask {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: .4;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.Mask-mask--black {
  background: #000;
}

.Mask-mask--white {
  background: rgba(255, 255, 255, .95);
}

.Mask-content {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  color: #fff;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.Mask-content--full {
  width: 100%;
  height: 100%;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.UserAvatar {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  border: 4px solid #fff;
  border-radius: 8px;
}

.UserAvatar-inner {
  vertical-align: top;
}

.UserAvatar-holder {
  width: 160px;
  height: 160px;
}

.UserAvatar-round {
  border-radius: 50%;
  width: 160px;
  height: 160px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
input[type=range].RangeInput {
  width: 220px;
  height: 12px;
  padding: 0;
  margin: 0 10px;
  vertical-align: middle;
  background: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
input[type=range].RangeInput:focus {
 outline: none;
}
input[type=range].RangeInput::-webkit-slider-runnable-track {
 height: 5px;
 cursor: pointer;
 background: #f2f5fb;
 border-radius: 2px;
}
input[type=range].RangeInput::-webkit-slider-thumb {
 width: 12px;
 height: 12px;
 margin-top: -4px;
 cursor: pointer;
 background: #d2dbe8;
 border-radius: 50%;
 -webkit-appearance: none;
 appearance: none;
}
input[type=range].RangeInput::-moz-range-track {
 height: 5px;
 cursor: pointer;
 background: #f2f5fb;
 border-radius: 2px;
}
input[type=range].RangeInput::-moz-range-thumb {
 width: 12px;
 height: 12px;
 cursor: pointer;
 background: #d2dbe8;
 border: none;
 border-radius: 50%;
}
input[type=range].RangeInput::-ms-track {
 width: 100%;
 height: 5px;
 color: transparent;
 cursor: pointer;
 background: transparent;
 border-color: transparent;
}
input[type=range].RangeInput::-ms-fill-lower,
  input[type=range].RangeInput::-ms-fill-upper {
 background: #f2f5fb;
 border-radius: 2px;
}
input[type=range].RangeInput::-ms-thumb {
 width: 12px;
 height: 12px;
 cursor: pointer;
 background: #d2dbe8;
 border: none;
 border-radius: 50%;
}
input[type=range].RangeInput::-ms-tooltip {
 display: none;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.UserAvatarEditor {
  cursor: pointer;
  position: relative;
}

.UserAvatarEditor-avatar {
  background: #f7f8fa;
  border: 4px solid #fff;
  border-radius: 8px;
}

.UserAvatarEditor-container {
  width: 256px;
  height: 256px;
  margin: 0 auto 30px;
  cursor: move;
}

.UserAvatarEditor-container canvas {
 vertical-align: top;
}

.UserAvatarEditor-modal {
  text-align: center;
}

.UserAvatarEditor-modal div {
 display: block;
}

.UserAvatarEditor-title {
  font-size: 24px;
  color: #262626;
}

.UserAvatarEditor-subTitle {
  font-size: 14px;
  color: #8590a6;
}

.UserAvatarEditor-range {
  width: 200px;
  margin: 20px 10px;
}

.UserAvatarEditor-maskInner {
  z-index: 4;
  border: 4px solid #fff;
  border-radius: 8px;
}

.UserAvatarEditor-maskInnerText {
  white-space: nowrap;
}

.UserAvatarEditor-cameraIcon {
  margin-bottom: 14px;
  fill: #fff;
}

.UserAvatarEditor-maskRoundInner {
  border-radius: 50%;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnForm-basicInfo {
  margin-top: 30px;
  padding-top: 30px;
  display: block;
}

.ColumnForm-formTitle {
  margin-top: 7px;
  float: left;
  width: 80px;
  text-align: right;
  font-weight: 700;
  line-height: 29px;
}

.ColumnForm-formContent {
  margin-left: 116px;
  position: relative;
  display: block;
}

.ColumnForm-muiInput {
  display: inline-block;
  border: 0;
  min-height: 40px;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .16);
          box-shadow: 0 1px 0 rgba(0, 0, 0, .16);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  line-height: 20px;
  padding: 10px 4px 11px;
  outline: 0;
  border-radius: 0;
  margin-bottom: 2px;
  -webkit-transition: -webkit-box-shadow ease-in-out .15s;
  transition: -webkit-box-shadow ease-in-out .15s;
  transition: box-shadow ease-in-out .15s;
  transition: box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  width: 368px;
  font-size: 16px;
  padding-left: 0;
}

.ColumnForm-tips {
  width: 368px;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  visibility: visible;
  opacity: 1;
  font-size: 14px;
  color: gray;
  padding-top: 10px;
  position: absolute;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.ColumnForm-tips:before,
  .ColumnForm-tips:after {
 display: table;
 content: "";
}

.ColumnForm-tips:after {
 clear: both;
}

.ColumnForm-save {
  position: absolute;
  right: 0;
  top: 7px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.ColumnForm-save .Button {
 width: 72px;
 height: 32px;
}

.ColumnForm-tipsNumber {
  margin-left: 194px
}

.ColumnForm-cancelButton {
  margin-right: 16px;
}

.ColumnForm-spine {
  display: inline-block;
  vertical-align: 0;
  font-size: 16px;
  margin-right: 2px;
}

.ColumnForm-tipsRightNumber {
  margin-left: 340px;
}

.ColumnForm-slugInput {
  width: 200px;
}

.ColumnForm-pendingName {
  max-width: 550px;
}

@media (max-width: 420px) {
  .ColumnForm-formTitle {
    float: none;
    display: block;
    text-align: left;
  }

  .ColumnForm-formContent {
    margin-left: 0;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnFormTopic-basicInfo {
  margin-top: 30px;
  padding-top: 30px;
  display: block;
}

.ColumnFormTopic-title {
  float: left;
  width: 80px;
  text-align: right;
  font-weight: 700;
  line-height: 29px;
}

.ColumnFormTopic-content {
  margin-left: 116px;
  position: relative;
}

.ColumnFormTopic-topic {
  padding-left: 0;
  font-weight: 400;
  margin-bottom: 0;
  line-height: 22px;
  position: relative;
  font-size: 16px;
  display: block;
}

.ColumnFormTopic-topic span {
 position: relative;
 z-index: 1;
 padding-right: 16px;
}

.ColumnFormTopic-topic:before {
 display: table;
 content: "";
}

.ColumnFormTopic-tag {
  margin-bottom: 15px;
  margin-right: 16px;
  color: gray;
  border-radius: 15px;
  font-size: 14px;
  line-height: 20px;
  padding: 5px 15px 5px 16px;
  display: inline-block;
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #eee;
  cursor: pointer;
}

.ColumnFormTopic-tag:hover {
 background-color: #f6f6f6;
}

@media (max-width: 420px) {
  .ColumnFormTopic-title {
    float: none;
    display: block;
    text-align: left;
  }

  .ColumnFormTopic-content {
    margin-left: 0;
    margin-top: 12px;
  }

  .ColumnFormTopic-content .HelpMenu-help {
  position: absolute;
  top: 0;
  margin-top: -36px;
  left: 92px;
 }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnFormContribution-basicInfo {
  display: block;
}

.ColumnFormContribution-title {
  float: left;
  width: 80px;
  text-align: right;
  font-weight: 700;
  line-height: 29px;
}

.ColumnFormContribution-content {
  margin-left: 116px;
  position: relative;
}

.ColumnFormContribution-mintro {
  font-size: 16px;
  padding: 6px 0 12px;
  display: block;
}

.ColumnFormContribution-submission {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  border: 0;
  background: transparent;
  outline: 0;
  margin: 0;
  color: #333;
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
  margin-right: 8px;
}

@media (max-width: 420px) {
  .ColumnFormContribution-title {
    float: none;
    display: block;
    text-align: left;
  }

  .ColumnFormContribution-content {
    margin-left: 0;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnSetting-errorMessage {
  padding: 0 38px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #8590a6;
  text-align: center;
}

.ColumnSetting-hr {
  height: 1px;
  border: 0;
  background: rgba(0, 0, 0, .06);
  margin: 48px 0;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

.ColumnSetting-deleteButton {
  text-align: left;
  margin-left: 116px;
  width: 60px;
}

.ColumnSetting-deleteModalDescription {
  padding: 0 16px 15px;
  line-height: 20px;
  color: gray;
  font-size: 14px;
}

.ColumnSetting-userAvatar {
  margin: 0 auto;
  position: relative;
  width: 160px;
  height: 160px;
}

.ColumnSetting-userAvatar .Mask-content {
 display: block;
}

@media (max-width: 420px) {
  .ColumnSetting {
  padding-left: 16px;
  padding-right: 16px;
  }

  .ColumnSetting-deleteModalDescription {
    margin-top: 20px;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.Time {
  position: relative;
  cursor: pointer;
}
.Time:hover {
 color: #333;
}
.Time:hover:before {
 content: "";
 position: absolute;
 left: 50%;
 width: 0;
 height: 0;
 margin: 0 0 0 -6px;
 font-size: 0;
 border-bottom: 6px solid rgba(0, 0, 0, .8);
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 -webkit-transition: all .05s ease-in-out;
 transition: all .05s ease-in-out;
 opacity: 0;
 bottom: auto;
 top: 22px;
 visibility: visible;
 opacity: 1;
 z-index: 50;
}
.Time:hover:after {
 content: attr(data-title);
 white-space: normal;
 bottom: auto;
 top: 28px;
 padding: 10px 16px;
 color: #fff;
 line-height: 1.5;
 text-align: center;
 position: absolute;
 left: 50%;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 font-size: 13px;
 display: inline-block;
 background-color: rgba(0, 0, 0, .8);
 border-radius: 4px;
 pointer-events: none;
 visibility: visible;
 opacity: 1;
 z-index: 50;
 line-height: 1.8;
 width: 290px;
 margin-left: -145px;
 -webkit-transition: all .05s ease-in-out;
 transition: all .05s ease-in-out;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnListItem-item {
  position: relative;
  padding: 20px 0;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.ColumnListItem-title {
  margin-right: 120px;
  font-size: 16px;
  padding: 0 0 8px;
  font-weight: 400;
  line-height: 1.5;
  word-break: break-all;
  max-height: 60px;
  color: #333;
  text-decoration: none;
  margin: 0;
  overflow: hidden;
}

.ColumnListItem-title a {
 cursor: pointer;
}

.ColumnListItem-meta {
  color: gray;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-size: 14px;
}

.ColumnListItem-include,
.ColumnListItem-edit,
.ColumnListItem-remove,
.ColumnListItem-pin {
  cursor: pointer;
}

.ColumnListItem-include:hover, .ColumnListItem-edit:hover, .ColumnListItem-remove:hover, .ColumnListItem-pin:hover {
 color: #333;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnPosts-title {
  line-height: 22px;
  font-weight: 700;
  position: relative;
  margin: 0;
  font-size: 16px;
}

.ColumnPosts-title span {
 background: #fff;
 position: relative;
 z-index: 1;
 width: 80px;
}

.ColumnPosts-title:after {
 content: '';
 position: absolute;
 height: 1px;
 left: 0;
 right: 0;
 top: 11px;
 background: #f0f0f0;
}

.ColumnPosts-modalTitle {
  line-height: 20px;
  text-align: center;
  color: gray;
  font-size: 14px;
}

.ColumnPosts-infiniteList .Spinner {
 margin: 50px auto;
}

@media (max-width: 420px) {
  .ColumnPosts {
  padding-left: 16px;
  padding-right: 16px;
  }

  .ColumnPosts-modalTitle {
    margin-top: 20px;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnContributes-container {
  margin-bottom: 80px;
  position: relative;
}

.ColumnContributes-items {
  margin-top: -48px;
}

.ColumnContributes-item {
  position: relative;
  padding: 20px 0;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.ColumnContributes-title {
  width: 70%;
  font-size: 16px;
  padding: 0 0 8px;
  font-weight: 400;
  line-height: 1.5;
  word-break: break-all;
  max-height: 60px;
  color: #333;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ColumnContributes-meta {
  display: block;
  color: gray;
  font-size: 14px;
}

.ColumnContributes-meta a:hover {
 color: #333;
}

.ColumnContributes-functions {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 26px;
  display: block;
}

.ColumnContributes-button {
  padding: 7px 12px;
  line-height: 18px;
  cursor: pointer;
  min-width: 80px;
  min-height: 32px;
  text-align: center;
}

.ColumnContributes-button:hover {
 color: #333;
}

.ColumnContributes-linkButton {
  color: #50C87E;
  font-size: 14px;
}

.ColumnContributes-linkButton:hover {
 color: #0CA547;
}

.ColumnContributes-ignoreModalDescribe {
  padding: 0 16px 15px;
  line-height: 20px;
  color: gray;
  font-size: 14px;
  text-align: center;
}

.ColumnContributes-emptyList {
  padding: 130px 0 48px;
  text-align: center;
}

.ColumnContributes-iconShow {
  font-size: 106px;
  color: #e5e5e5;
}

.ColumnContributes-emptyTitle {
  margin-top: 29px;
  color: gray;
}

@media (max-width: 420px) {
  .ColumnContributes-items {
  padding-left: 16px;
  padding-right: 16px;
  }

  .ColumnContributes-ignoreModalDescribe {
    margin-top: 20px;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnAuthorsList {
  line-height: 22px;
  position: relative;
  font-size: 16px;
}

.ColumnAuthorsList:after {
 content: '';
 position: absolute;
 height: 1px;
 left: 0;
 right: 0;
 top: 11px;
 background: #f0f0f0;
 margin-right: 60px;
}

.ColumnAuthorsList-title {
  display: block;
  margin: 0 0 32px;
}

.ColumnAuthorsList-name {
  background: #fff;
  font-weight: 700;
  position: relative;
  z-index: 1;
  padding-right: 16px;
}

.ColumnAuthorsList-SearchMenu {
  width: 55px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  position: absolute;
  top: -6px;
  right: 0;
  background: #fff;
}

.ColumnAuthorsList-trigger {
  display: block;
  height: 100%;
  color: gray;
  font-size: 14px;
  cursor: pointer;
  text-align: right;
  z-index: 3;
}

.ColumnAuthorsList-items {
  list-style: none;
  height: 48px;
  margin-bottom: 40px;
  position: relative;
}

.ColumnAuthorsList-items .Avatar-hemingway {
 width: 48px;
 height: 48px;
}

.ColumnAuthorsList-items a {
 float: left;
}

.ColumnAuthorsList-intro {
  margin-left: 64px;
}

.ColumnAuthorsList-intro strong {
 font-size: 16px;
 font-weight: 700;
 margin-bottom: 6px;
 display: inline-block;
 line-height: 22px;
}

.ColumnAuthorsList-bio {
  display: block;
  color: gray;
  font-size: 14px;
  padding-right: 10px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ColumnAuthorsList-functions {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  margin-top: 7px;
}

.ColumnAuthorsList-sendMessageButton {
  cursor: pointer;
}

.ColumnAuthorsList-cancelButton,
.ColumnAuthorsList-revamp {
  margin-right: -3px;
  margin-left: 46px;
  cursor: pointer;
}

.ColumnAuthorsList-modalIntro {
  padding: 0 16px 15px;
  line-height: 20px;
  color: gray;
  font-size: 14px;
  text-align: center;
}

.ColumnAuthorsList-modalIntro span {
 color: #333;
}

.ColumnAuthorsList-empty {
  padding: 10px 0;
  font-size: 14px;
  color: gray;
  text-align: center;
}

.ColumnAuthorsList-input {
  width: 100%;
}

.ColumnAuthorsList-revamp {
  display: inline-block;
}

.ColumnAuthorsList-revamp .icon-ic_unfold {
 position: relative;
 top: 4px;
}

.ColumnAuthorsList-revampList {
  position: absolute;
  z-index: 30;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 4px;
  -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
          box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
  background-color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 92px;
  margin: 6px 0 0 -9px;
}

.ColumnAuthorsList-revampItem {
  cursor: pointer;
  padding: 0 16px;
  white-space: nowrap;
  border: 0;
  color: #333;
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ColumnAuthorsList-revampItem:hover{
 background-color: #f7f8f9;
}

@media (max-width: 420px) {
  .ColumnAuthorsList {
  padding-left: 16px;
  padding-right: 16px;
  }

  .ColumnAuthorsList-modal {
  padding-left: 16px;
  padding-right: 16px;
  }

  .ColumnAuthorsList-modalIntro {
    margin-top: 20px;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.ColumnAuthors-basicInfo {
  position: relative;
  margin-bottom: 73px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ColumnSettings-layout {
  margin-top: 0;
  width: 660px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding: 0 0 55px;
}

.ColumnSettings-titles {
  line-height: 18px;
}

.ColumnSettings-subtitle {
  font-size: 13px;
  color: gray;
  margin-bottom: 2px;
  cursor: pointer;
}

.ColumnSettings-maintitle {
  font-size: 14px;
  font-weight: 700;
  color: #414243;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ColumnSettings-tab {
  border-bottom: 2px solid rgba(0, 0, 0, .08);
  margin-bottom: 48px;
  height: 66px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  cursor: pointer;
}

.ColumnSettings-type {
  position: relative;
  bottom: -2px;
  margin-right: 16px;
  float: left;
  padding: 0 16px;
  line-height: 64px;
  color: #333;
  text-decoration: none;
}

.ColumnSettings-type:active {
 color: #0080ff;
 border-bottom: 2px solid #0080ff;
}

.ColumnSettings-active {
  color: #0080ff;
  border-bottom: 2px solid #0080ff;
}

.ColumnSettings-contributeNum {
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  background: #e26d6d;
  padding: 0 6px;
  border-radius: 9px;
  position: relative;
  bottom: 1px;
  margin-left: 5px;
  vertical-align: baseline;
}

@media (max-width: 420px) {
  .ColumnSettings-tab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 10px;
    height: 55px;
  }

  .ColumnSettings-type {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    float: none;
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;
    line-height: 43px;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.PostShare .MenuButton {
 font-size: 15px;
 font-weight: normal;
}

.PostShare .Menu-dropdown {
 top: 100%;
 width: 134px;
 left: 50%;
 margin-left: -66px;
}

.PostShare .Menu-item {
 border-top: 1px solid rgba(0, 0, 0, .08);
}

.PostShare .Menu-item:first-child {
 border-top: 0;
}

.PostShare-qrCode {
  width: 99px;
  height: 99px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.PinManage .Menu-dropdown {
 top: 100%;
 width: 88px;
 left: 50%;
 margin-left: -44px;
}

.PinManage .Menu-dropdown .Button {
 text-align: center;
 padding: 0;
}

.PinManage .Menu-dropdown .Menu-item + .Menu-item {
 border-top: 1px solid rgba(0, 0, 0, .08);
}

.PinManage-deleteButton {
  margin-top: 6px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.CommentContainer {
  padding-bottom: 48px;
}

.CommentContainer .CommentContainer-mainEditor .CommentEditor-actions {
 display: none;
}

.CommentContainer .CommentContainer-mainEditor.CommentEditor--opened .CommentEditor-actions {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
}

.CommentContainer-blockTitle {
  position: relative;
  z-index: 3;
}

.CommentContainerDisabled {
  padding: 13px 0;
  background: #f7f8f9;
  color: #808080;
  text-align: center;
  border-radius: 4px;
  font-size: 15px;
}

.CommentContainer .CommentEditor + .CommentContainerDisabled{
  margin-top: 24px;
}

.CommentContainer-list {
  margin-top: 32px;
}

.CommentContainer-list .CommentItem:first-child {
 margin-top: 0;
}

.CommentContainer-listLoading {
  position: relative;
}

.CommentContainer-listLoading::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 100%;
 background: rgba(255, 255, 255, .8);
 z-index: 1;
}

.CommentContainer-spinner {
  margin: 30px;
}

.CommentContainer-listSpinner {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
}

.CommentContainer-split {
  font-size: 14px;
  margin: 32px auto 0;
  width: 500px;
  text-align: center;
}

.CommentContainer-split .BlockTitle-title {
 padding: 0 16px;
 font-weight: 400;
 color: #808080;
}

.CommentContainer-pagination {
  margin-top: 16px;
}

.ConversationDialog .Spinner {
 margin: 120px auto;
}

.ConversationDialog-list {
  max-height: calc(60vh - 80px);
  overflow: auto;
  padding-bottom: 40px;
}

.ConversationDialog-list .CommentItem {
 padding-right: 16px;
}

.ConversationDialog-list .CommentItem .CommentItem-like {
 right: 16px;
}

.ConversationDialog-list .CommentItem:first-child {
 margin-top: 0;
}

@media (max-width: 660px) {

 .ConversationDialog-list {
  padding: 16px;
  max-height: none;
  max-height: initial
 }
}

.ConversationDialog-editor {
  padding: 16px;
  margin: 24px -16px -16px;
  border-top: 1px solid rgba(0, 0, 0, .06);
}


@media (max-width: 660px) {
  .CommentContainer-mainEditor,
  .CommentContainer-list {
    padding-left: 16px;
    padding-right: 16px;
  }

  .CommentContainer-split {
    width: 100%;
  }
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.ImageGallery {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 101;
  overflow: hidden;
  -webkit-transition: background-color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out;
}

.ImageGallery.is-active {
 background-color: rgba(0, 0, 0, .8);
}

.ImageGallery .ImageGallery-Content {
 position: absolute;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.ImageGallery .ImageGallery-Content .ImageGallery-arrow-left,
    .ImageGallery .ImageGallery-Content .ImageGallery-arrow-right {
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
}

.ImageGallery-arrow-left,
.ImageGallery-arrow-right,
.ImageGallery-close {
  position: absolute;
  cursor: pointer;
  width: 72px;
  height: 72px;
}

.ImageGallery-arrow-left::before, .ImageGallery-arrow-right::before, .ImageGallery-close::before {
 content: '';
 position: absolute;
 border-radius: 50%;
 width: 100%;
 height: 100%;
}

.ImageGallery-arrow-left:hover::before, .ImageGallery-arrow-right:hover::before, .ImageGallery-close:hover::before {
 background: #fff;
 opacity: .1;
}

.ImageGallery-arrow-left:active::before, .ImageGallery-arrow-right:active::before, .ImageGallery-close:active::before {
 background: #fff;
 opacity: .3;
}

.ImageGallery-arrow-left svg, .ImageGallery-arrow-right svg, .ImageGallery-close svg {
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}

.ImageGallery-arrow-disabled {
  opacity: .3;
  cursor: default;
}

.ImageGallery-arrow-disabled:hover::before, .ImageGallery-arrow-disabled:active::before {
 background: transparent;
}

.ImageGallery-Inner {
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
}

.ImageGallery-CursorZoomIn {
  cursor: -webkit-zoom-in;
}

.ImageGallery-transition {
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.ImageGallery-fixed {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.ImageGallery-close {
  position: absolute;
  top: 24px;
  right: 14px;
}

.ImageView.is-active {
  background-color: rgba(0, 0, 0, .1);
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.Image-Wrapper-Preview {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-right: -2px;
  display: block;
}
.Image-Wrapper-Preview::after {
 display: block;
 clear: both;
 content: "";
 visibility: hidden;
 height: 0;
}
.Image-Wrapper-Preview .Thumbnail-Wrapper {
 float: left;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 position: relative;
 height: 1px;
 margin-bottom: 2px;
 cursor: -webkit-zoom-in;
 cursor: zoom-in;
}
.Image-Wrapper-Preview .Thumbnail-Wrapper span {
 margin-right: 2px;
 position: relative;
 display: block;
 overflow: hidden;
 height: 100%;
}
.Image-Wrapper-Preview .Thumbnail-Wrapper span img {
 position: absolute;
}
.Image-Wrapper-Preview .Thumbnail-Wrapper .Image-PreviewVague .VagueImage {
 position: static;
}
.Image-Wrapper-Preview .Thumbnail-Wrapper .Image-PreviewVague > img {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100%;
 -webkit-transform: translate3d(-50%, -50%, 0);
 transform: translate3d(-50%, -50%, 0);
}
.Image-Wrapper-Preview .Thumbnail-Wrapper .Thumbnail-Surplus-Sign {
 position: absolute;
 left: 0;
 top: 0;
 right: 2px;
 bottom: 0;
 font-size: 32px;
 color: #fff;
 font-style: normal;
 z-index: 1;
 font-weight: 500;
 letter-spacing: 4px;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
}
.Image-Wrapper-Preview .Thumbnail-Wrapper .Thumbnail-Surplus-Sign::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: #000;
 opacity: .3;
 z-index: -1;
}
.Image-Wrapper-Preview .Thumbnail-Wrapper .Thumbnail-Gif-Sign {
 position: absolute;
 background: rgba(255, 255, 255, .55);
 border-radius: 4px;
 border: 1px solid rgba(0, 0, 0, .15);
 color: rgba(0, 0, 0, .35);
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 cursor: pointer;
 width: 28px;
 height: 16px;
 right: 6px;
 bottom: 6px;
 font-weight: 500;
 font-style: normal;
 text-align: center;
 line-height: 18px;
 font-size: 12px;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}
.RePin-content {
  border: 1px solid #e7eaf2;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 33, 77, .05);
          box-shadow: 0 1px 3px 0 rgba(0, 33, 77, .05);
  background: #fff;
  margin-top: 12px;
  border-radius: 4px;
  padding: 16px;
  font-size: 15px;
  line-height: 25px;
}
.RePin-content .Repin-author-name {
 color: #333;
 font-size: 15px;
 margin-right: 5px;
}
.RePin-content .Repin-text {
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
}
.RePin-content blockquote {
 padding-left: 1.2em;
 border-left: 4px solid #e2e3e4;
 color: #333;
 margin: 8px 0;
 margin-top: 8px;
}
.RePin-content .Repin-link {
 font-size: 14px;
 color: #9197A3;
 line-height: 16px;
 margin-top: 8px;
 width: 100%;
 display: block;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.RePin-content .Video {
 margin-bottom: 0;
 margin-top: 8px;
}
.RePin-content .Image-Wrapper-Preview {
 margin-top: 8px;
}
.RePin-content .Image-preview-1 .Thumbnail-Wrapper, .RePin-content .Image-preview-2 .Thumbnail-Wrapper, .RePin-content .Image-preview-4 .Thumbnail-Wrapper {
 width: 50%;
}
.RePin-content .Image-preview-3 .Thumbnail-Wrapper, .RePin-content .Image-preview-6 .Thumbnail-Wrapper, .RePin-content .Image-preview-9 .Thumbnail-Wrapper {
 width: 33.33%;
}
.RePin-content .Image-preview-5 .Thumbnail-Wrapper {
 width: 33.33%;
}
.RePin-content .Image-preview-5 .Thumbnail-Wrapper:nth-child(1),
      .RePin-content .Image-preview-5 .Thumbnail-Wrapper:nth-child(2) {
 width: 50%;
}
.RePin-content .Image-preview-7 .Thumbnail-Wrapper {
 width: 25%;
}
.RePin-content .Image-preview-7 .Thumbnail-Wrapper:nth-child(1),
      .RePin-content .Image-preview-7 .Thumbnail-Wrapper:nth-child(2),
      .RePin-content .Image-preview-7 .Thumbnail-Wrapper:nth-child(3) {
 width: 33.33%;
}
.RePin-content .Image-preview-8 .Thumbnail-Wrapper {
 width: 25%;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */
}

.pinIndex-author {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 14px;
  color: #808080;
}

.pinIndex-author .pinIndex-authorName,
  .pinIndex-author time {
 color: #808080;
}

.pinIndex-author .pinIndex-authorName:hover, .pinIndex-author time:hover {
 color: #333;
}

.pinIndex-author .Badge {
 position: relative;
 top: -1px;
}

.pinIndex-authorName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pinIndex-authorAvatar {
  margin-right: 12px;
}

.pinIndex-authorFollowButton {
  width: 88px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: auto;
  padding: 0;
}

.PinIndex-content {
  margin-top: 30px;
  line-height: 1.7;
}

@media (max-width: 660px) {
  .PinIndex-content,
  .pinIndex-author {
  padding-left: 16px;
  padding-right: 16px}

}

